使用 JavaScript 动态计算总和

发布于 2024-09-29 02:13:03 字数 349 浏览 3 评论 0原文

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

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

如何在 JavaScript 中做到这一点？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

靑春怀旧 2024-10-06 02:13:03

像这样的东西：

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

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

静若繁花 2024-10-06 02:13:03

另一个版本。


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

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

意中人 2024-10-06 02:13:03

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

还有其他方法可以引用表单项，但此一种有效。

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

情仇皆在手 2024-10-06 02:13:03

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

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

自我难过 2024-10-06 02:13:03

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

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

~没有更多了~