compute sum dynamically with javascript

2019-02-26 08:15发布

站内问答 / JavaScript
1901 5 2

I have two textboxes Num1 and Num2 and another textbox Sum having the value 10.

How can I do this wherein if the user will enter a number for Num1, it will add it to Sum and dynamically change the displayed number in the Sum textbox. If the user will enter a number in Num2 it will also add that number to the updated number shown in Sum textbox and dynamically change the value for Sum textbox also.

How to do this in Javascript?

5条回答
我想做一个坏孩纸
2楼-- · 2019-02-26 08:47 
<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.

查看更多
0人赞 添加讨论(0) 举报
淡お忘
3楼-- · 2019-02-26 08:51 
<!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>
查看更多
0人赞 添加讨论(0) 举报
放我归山
4楼-- · 2019-02-26 08:52

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>
查看更多
0人赞 添加讨论(0) 举报
再贱就再见
5楼-- · 2019-02-26 08:52 
<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>
查看更多
0人赞 添加讨论(0) 举报
祖国的老花朵
6楼-- · 2019-02-26 09:09

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)