javascript 使用javascript动态计算总和
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4029785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
compute sum dynamically with javascript
提问by anonymous
I have two textboxes Num1and Num2and another textbox Sumhaving the value 10.
我有两个文本框Num1和Num2另一个Sum具有值的文本框10。
How can I do this wherein if the user will enter a number for Num1, it will add it to Sumand dynamically change the displayed number in the Sumtextbox. If the user will enter a number in Num2it will also add that number to the updated number shown in Sumtextbox and dynamically change the value for Sumtextbox also.
我该如何做到这一点，如果用户为 输入一个数字Num1，它会将其添加到Sum并动态更改Sum文本框中显示的数字。如果用户将在Num2其中输入一个数字，它也会将该数字添加到Sum文本框中显示的更新数字中，并动态更改Sum文本框的值。
How to do this in Javascript?
如何在 Javascript 中做到这一点？
回答by TarasB
Something like that:
类似的东西：
<input type="text" id="Num1" value="1" onblur="recalculateSum();"/>
<span>+</span>
<input type="text" id="Num2" value="1" onblur="recalculateSum();"/>
<span>=</span>
<input type="text" id="Sum" value=""/>
<script>
function recalculateSum()
{
var num1 = parseInt(document.getElementById("Num1").value);
var num2 = parseInt(document.getElementById("Num2").value);
document.getElementById("Sum").value = num1 + num2;
}
</script>
回答by T.P.
Another version.
另一个版本。
<!DOCTYPE html>
<html>
<head>
<title>Summer</title>
</head>
<body>
Num 1: <input type="text" id="num1" name="num1" value="4"/><br />
Num 2: <input type="text" id="num2" name="num2" value="6"/><br />
Sum <input type="text" id="sum" name="sum" value="10">
<script type="text/javascript">
var _num1 = document.getElementById('num1');
var _num2 = document.getElementById('num2');
var _sum = document.getElementById('sum');
_num1.onblur = function(){
_sum.value = (parseInt(_sum.value,10) + parseInt(this.value,10));
};
_num2.onblur = function(){
_sum.value = (parseInt(_sum.value,10) + parseInt(this.value,10));
};
</script>
</body>
</html>
回答by Robusto
<input type="text" id="Num1" name="Num1"/>
<input type="text" id="Num2" name="Num2"/>
<input type="text" id="Sum" name="Sum"/>
function addNums() {
var num1 = parseInt(document.getElementById('Num1').value,10);
var num2 = parseInt(document.getElementById('Num2').value,10)
document.getElementById('Sum').value = (num1 + num2).toString();
}
There are other ways to reference the form items, but this one works.
还有其他方法可以引用表单项，但这种方法有效。
回答by Jean de Dieu Musengamana
<input type="text" id="Num1" value="1" onblur="recalculateSum();"/>
<input type="text" id="Num2" value="1" onblur="recalculateSum();"/>
<input type="text" id="Sum" value=""/>
<script>
function recalculateSum()
{
var num1 = parseInt(document.getElementById("Num1").value);
var num2 = parseInt(document.getElementById("Num2").value);
document.getElementById("Sum").value = num1 + num2;
}
</script>
回答by Zoyeb Shaikh
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate(){
var x=parseInt(document.getElementById("first").value);
var y=parseInt(document.getElementById("second").value);
document.getElementById("answer").value=(x+y);
}
</script>
<title>exam</title>
</head>
<body>
<form>
First:<input id="first" name="first" type="text"><br>
Second:<input id="second" name="second" type="text"><br>
Answer:<input id="answer" name="answer" type="text"><br>
<input onclick="calculate()" type="button" value="Addition">
</form>
</body>
</html>
