Javascript - 得到两个总和的总和?

时间:2015-07-15 20:34:53

标签: javascript

我有4个方程式,2个2个方程式。每个方程式也有总数。我想得到这两个总和的总和(总计),但我想只使用两个总数,而不是单个方程,因为在我的最终代码中会有很多。

我做了一个尝试,但我是新手编码而且卡住了。任何帮助都会非常感谢,干杯!

<!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>

2 个答案:

答案 0 :(得分:2)

在您的gTotal中,您的小计需要使用innerHTML而不是value来阅读。然后放下美元符号并将它们解析为浮点数:

var w = parseFloat(document.getElementById("subtotal1").innerHTML.substr(1));
var x = parseFloat(document.getElementById("subtotal2").innerHTML.substr(1));

完整示例:

<!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>

答案 1 :(得分:1)

我认为问题在于您尝试将字符串转换为带有美元符号的数字。这有效......

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;
}