使用 javascript 动态计算总和答案

【问题标题】：compute sum dynamically with javascript使用 javascript 动态计算总和
【发布时间】：2010-10-27 03:34:52
【问题描述】：

我有两个文本框 Num1 和 Num2 和另一个文本框 Sum，其值为 10。

我该怎么做，如果用户输入Num1 的数字，它会将其添加到Sum 并动态更改Sum 文本框中显示的数字。如果用户将在Num2 中输入一个数字，它还会将该数字添加到Sum 文本框中显示的更新数字中，并动态更改Sum 文本框的值。

如何在 Javascript 中做到这一点？

【问题讨论】：

标签： javascript input

【解决方案1】：

类似的东西：

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

【讨论】：

有一个问题，因为当我使用 '+' 时它会连接。

【解决方案2】：

另一个版本。


<!DOCTYPE html>
<html>
<head>
<title>Summer</title>
</head>
<body>
  Num 1: <input type="text" id="num1" name="num1" value="4"/&gt<br />
  Num 2: <input type="text" id="num2" name="num2" value="6"/&gt<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>

【讨论】：

感谢@ScottSEA。虽然在阅读了 maerics 和 Robusto 的 cmets 之后，我选择了 onblur 事件，因为如果在输入字段中输入了相同的数字，onchange 不会更新 sum。 :)
这给了我累积总和...例如，如果我将第一个字段从 4 更改为 3，我得到 13 而不是 9（以前的总和 10 + 新数字 3）。这是故意的吗？
没关系，我明白了。对于简单的两个数字之和，函数需要替换为：_sum.value = (parseInt(_num1.value,10) + parseInt(_num2.value,10));

【解决方案3】：

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

还有其他方法可以引用表单项，但这个可行。

【讨论】：

如果“addNums”函数被重复调用，比如setInterval，那么sum可以定期更新。这比依赖于输入元素的“onchange”处理程序要好，后者可能会在用户意外的时间触发（例如，在焦点改变之后，而不是在用户“完成”输入时）。
@maerics：我认为您的意思是针对@jtp 的回复发表此评论。他是谈论 onchange 处理程序的人。我的回复范围与函数何时被调用无关，它只是说明了在输入元素中添加数值的机制。
@maerics - onchange 事件的好点。即使它的浏览器有怪癖，在这种情况下它在技术上也是一个语义错误，因为输入相同的值不会更新总和。
对不起，我的评论令人困惑，我试图解释如何将您的机制与触发器相结合，使其比使用“onchange”处理程序的解决方案更强大。 (+1)

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：