使用javascript自動計算輸入值的總和

Question

我有一個html頁面，其中包含許多動態創建的輸入框。 文本框的數量每次都不同。 我想計算用戶輸入的數字總和，然后進行顯示。 當用戶刪除一個數字時，總和將自動計算。

我該如何使用JavaScript？ 謝謝

Answer 1

在jQuery中，類似這樣的操作應符合以下幾個假設：

$('.toAdd').live('change', function() {
  var total = 0;

  $('.toAdd').each(function () {
    total += $(this).val();
  });

  $('#total').val(total);
});

假設您的輸入字段都具有“ toAdd”類，而最終輸入字段的ID為“ total”。

在純JS中：

var elems = document.getElementsByClassName('toAdd');

var myLength = elems.length,
total = 0;

for (var i = 0; i < myLength; ++i) {
  total += elems[i].value;
}

document.getElementById('total').value = total;

Answer 2

當我復習筆記時，請讓我詳細說明一下，但是這里有一個我認為會有用的高級答案...（我的Java腳本非常生銹）...

使輸入框共享一個屬性（或使用標簽），以便無論大小如何都可以遍歷一個集合...然后，在每個輸入調用onkeyup事件時，此函數將求和。 將結果放入另一個具有您事先知道的ID的條目中...

您將必須驗證輸入，因為如果其中之一不是數字，則總數也將是“ NAN”

好的，這是一個完整的工作示例，您可以基於我剛剛提出的例子：顯然，您需要做大量的工作……

<html>
<head>
<script language="javascript">
function AddInputs()
{
    var total = 0;
    var coll = document.getElementsByTagName("input")
    for ( var i = 0; i<coll.length; i++)
    {
        var ele = coll[i];
        total += parseInt(ele.value);
    }
    var Display = document.getElementById("Display");
    Display.innerHTML = total;
}
</script>
</head>
<body>
<input onkeyup="AddInputs()" />
<input onkeyup="AddInputs()" />
<input onkeyup="AddInputs()" />
<span id="Display"></span>
</body>
</html>

使用javascript自動計算輸入值的總和

問題描述

2 個解決方案

解決方案1
4 已采納 2010-06-28 14:39:10

解決方案2
1 2010-06-28 14:43:39

使用javascript自動計算輸入值的總和

問題描述

2 個解決方案

解決方案1 4 已采納 2010-06-28 14:39:10

解決方案2 1 2010-06-28 14:43:39

解決方案1
4 已采納 2010-06-28 14:39:10

解決方案2
1 2010-06-28 14:43:39