Javascript - Getting the sum of two totals?
I have 4 equations, 2 sets of 2. Each one also has a total number. I would like to get the sum of both of these totals (total), but I only want to use the two totals, not separate equations as there will be many in my final code.
I did try but I am new to coding and am stuck. Any help would be much appreciated Cheers!
<!doctype html>
<html>
<body onload="equation1();equation2();equation3();equation4();sum1();sum2(); gtotal()">
<p>Item 1 A</p>
<input type="number" onkeyup="equation1(); sum1(); gtotal() " onkeydown="equation1(); sum1(); gtotal()" value="3" id="box1">
<p id="result1"></p>
<div class="clear">
</div>
<p>Item 2 A</p>
<input type="number" onkeyup="equation2(); sum1(); gtotal()" onkeydown="equation2(); sum1(); gtotal()" value="1" id="box2">
<p id="result2"></p>
<div class="clear">
</div>
<p>Total 1</p>
<p id="subtotal1"></p>
<br>
<p>Item 1 B</p>
<input type="number" onkeyup="equation3(); sum2(); gtotal()" onkeydown="equation3(); sum2(); gtotal()" value="3" id="box3">
<p id="result3"></p>
<div class="clear">
</div>
<p>Item 2 B</p>
<input type="number" onkeyup="equation4(); sum2(); gtotal()" onkeydown="equation4(); sum2(); gtotal()" value="1" id="box4">
<p id="result4"></p>
<div class="clear">
</div>
<p>Total 2</p>
<p id="subtotal2"></p>
<p>Grand Total</P>
<p id="grandTotal"></p>
<br>
<script>
var total1
var total2
var total3
var total4
function equation1() {
var x = document.getElementById("box1").value;
total1 = Number(x) * 6.23;
var z = "$" + total1.toFixed(2);
document.getElementById("result1").innerHTML = z;
}
function equation2() {
var x = document.getElementById("box2").value;
total2 = Number(x) * 8.15;
var z = "$" + total2.toFixed(2);
document.getElementById("result2").innerHTML = z;
}
function equation3() {
var x = document.getElementById("box3").value;
total3 = Number(x) * 8.15;
var z = "$" + total3.toFixed(2);
document.getElementById("result3").innerHTML = z;
}
function equation4() {
var x = document.getElementById("box4").value;
total4 = Number(x) * 8.15;
var z = "$" + total4.toFixed(2);
document.getElementById("result4").innerHTML = z;
}
function sum1() {
var x = Number(total1)+ Number(total2);
var z = "$" + x.toFixed(2);
document.getElementById("subtotal1").innerHTML = z;
}
function sum2() {
var x = Number(total3)+ Number(total4);
var z = "$" + x.toFixed(2);
document.getElementById("subtotal2").innerHTML = z;
}
function gtotal() {
var w = document.getElementById("subtotal1").value;
var x = document.getElementById("subtotal2").value;
var y = Number(w)+ Number(x);
var z = "$" + y.toFixed(2);
document.getElementById("grandTotal").innerHTML = z;
}
</script>
</body>
</html>
+3
source to share
2 answers
I think the problem was that you were trying to convert the string to a dollar sign. It works...
function gtotal() {
var w = document.getElementById("subtotal1").innerHTML;
var x = document.getElementById("subtotal2").innerHTML;
var y = Number(w.substring(1))+ Number(x.substring(1));
var z = "$" + y.toFixed(2);
document.getElementById("grandTotal").innerHTML = z;
}
+1
source to share
In your gTotal, your subtotals should be read with help innerHTML
instead of value
. Then strip the dollar sign and parse them as floats:
var w = parseFloat(document.getElementById("subtotal1").innerHTML.substr(1));
var x = parseFloat(document.getElementById("subtotal2").innerHTML.substr(1));
Complete example:
<!doctype html>
<html>
<body onload="equation1();equation2();equation3();equation4();sum1();sum2(); gtotal()">
<p>Item 1 A</p>
<input type="number" onkeyup="equation1(); sum1(); gtotal() " onkeydown="equation1(); sum1(); gtotal()" value="3" id="box1">
<p id="result1"></p>
<div class="clear">
</div>
<p>Item 2 A</p>
<input type="number" onkeyup="equation2(); sum1(); gtotal()" onkeydown="equation2(); sum1(); gtotal()" value="1" id="box2">
<p id="result2"></p>
<div class="clear">
</div>
<p>Total 1</p>
<p id="subtotal1"></p>
<br>
<p>Item 1 B</p>
<input type="number" onkeyup="equation3(); sum2(); gtotal()" onkeydown="equation3(); sum2(); gtotal()" value="3" id="box3">
<p id="result3"></p>
<div class="clear">
</div>
<p>Item 2 B</p>
<input type="number" onkeyup="equation4(); sum2(); gtotal()" onkeydown="equation4(); sum2(); gtotal()" value="1" id="box4">
<p id="result4"></p>
<div class="clear">
</div>
<p>Total 2</p>
<p id="subtotal2"></p>
<p>Grand Total</P>
<p id="grandTotal"></p>
<br>
<script>
var total1
var total2
var total3
var total4
function equation1() {
var x = document.getElementById("box1").value;
total1 = Number(x) * 6.23;
var z = "$" + total1.toFixed(2);
document.getElementById("result1").innerHTML = z;
}
function equation2() {
var x = document.getElementById("box2").value;
total2 = Number(x) * 8.15;
var z = "$" + total2.toFixed(2);
document.getElementById("result2").innerHTML = z;
}
function equation3() {
var x = document.getElementById("box3").value;
total3 = Number(x) * 8.15;
var z = "$" + total3.toFixed(2);
document.getElementById("result3").innerHTML = z;
}
function equation4() {
var x = document.getElementById("box4").value;
total4 = Number(x) * 8.15;
var z = "$" + total4.toFixed(2);
document.getElementById("result4").innerHTML = z;
}
function sum1() {
var x = Number(total1)+ Number(total2);
var z = "$" + x.toFixed(2);
document.getElementById("subtotal1").innerHTML = z;
}
function sum2() {
var x = Number(total3)+ Number(total4);
var z = "$" + x.toFixed(2);
document.getElementById("subtotal2").innerHTML = z;
}
function gtotal() {
var w = parseFloat(document.getElementById("subtotal1").innerHTML.substr(1));
var x = parseFloat(document.getElementById("subtotal2").innerHTML.substr(1));
var y = Number(w)+ Number(x);
var z = "$" + y.toFixed(2);
document.getElementById("grandTotal").innerHTML = z;
}
</script>
</body>
</html>
+2
source to share