I'm trying to store a javascript variable so it can be updated and carried across html pages using sessionstorage.
In htmlpage1 the user can change input1 and input2 which update js variable total1. In function CalcTotal1() I've tried to use sessionStorage.setItem("newtotal1", total1) to store total1, so it can be carried across to htmlpage2.
When htmlpage2 is loaded function RunningTotalCalc2() runs. In this function I've tried to use sessionStorage.getItem("newtotal1") to call up variable total1 so it can be used in a formula. Unfortunately total1 doesn't seem to used in the calculation for running total.
I'm not sure where the mistake is. It could be the seesion storage code in CalcTotal1() or RunningTotalCalc2() or maybe somewhere else.
I couldn't get this working on jsfiddle with multiple html pages... so apologies for the messy code. Very grateful for any help. Mike.
<!-- this is htmlpage1 -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.1/js/bootstrap-dialog.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="spending2.js"></script>
</head>
<body>
RUNNING TOTAL:
<div id="chkRunningTotal"></div>
<br>
TOTAL 1:
<div id="chkTotal"></div>
<br>
<input type="text" name="input1" id="input1" />
<input type="button" value="Change Input 1" onclick="GetTotal1(this)" />
<br>
<br>
<input type="text" name="input2" id="input2" />
<input type="button" value="Change Input 2" onclick="GetTotal1(this)" />
<script>
$(document).ready(function() {
DisplayInputs1();
GetTotal1();
});
</script>
</body>
<!-- this is htmlpage2 -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.1/js/bootstrap-dialog.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="spending2.js"></script>
</head>
<body>
RUNNING TOTAL:
<div id="chkRunningTotal"></div>
<br>
TOTAL 2:
<div id="chkTotal2"></div>
<br>
<input type="text" name="input3" id="input3" />
<input type="button" value="Change Input 3" onclick="GetTotal2(this)" />
<br>
<br>
<input type="text" name="input4" id="input4" />
<input type="button" value="Change Input 4" onclick="GetTotal2(this)" />
<script>
$(document).ready(function() {
DisplayInputs2();
GetTotal2();
});
</script>
</body>
<script>
//this is spending2.js
var input1 = 555;
var input2 = 666;
var input3 = 147;
var input4 = 33;
function GetTotal1() {
CalcTotal1()
RunningTotalCalc1();
}
function GetTotal2() {
CalcTotal2()
RunningTotalCalc2();
}
function RunningTotalCalc1() {
runningtotal = input1 + input2 + input3 + input4
$("#chkRunningTotal").html(runningtotal);
}
function RunningTotalCalc2() {
var total1 = sessionStorage.getItem("newtotal1");
runningtotal = total1 + input3 + input4
$("#chkRunningTotal").html(runningtotal);
}
function CalcTotal1() {
var total1 = 0
input1 = parseInt($('#input1').val() || 0, 10);
input2 = parseInt($('#input2').val() || 0, 10);
total1 = input1 + input2;
$("#chkTotal").html(total1);
sessionStorage.setItem("newtotal1", total1);
}
function CalcTotal2() {
var total2 = 0;
input3 = parseInt($('#input3').val() || 0, 10);
input4 = parseInt($('#input4').val() || 0, 10);
total2 = input3 + input4;
$("#chkTotal2").html(total2);
}
function DisplayInputs1() {
document.getElementById("input1").value = input1;
document.getElementById("input2").value = input2;
}
function DisplayInputs2() {
document.getElementById("input3").value = input3;
document.getElementById("input4").value = input4;
}
</script>
As long as the two HTML pages share the same window, domain/hostname, protocol and port, they should be able to share the sessionStorage object.
And @mike-c is right about needing to assign the value you get using 'getItem' since it is currently discarded as you aren't assigning it to anything.