2010-06-28 364 views
1

我有一個有很多動態創建的輸入框的html頁面。文本框的數量每次都有所不同。 我想計算用戶輸入的數字的總和,並顯示它。當用戶刪除一個數字時,總和應該自動計算。使用javascript自動計算輸入值的總和

我該怎麼用javascript做到這一點? 感謝

+1

請提供您的HTML結構的示例。你的輸入是共享一個類,容器還是具有相似的ID? – 2010-06-28 14:35:57

+0

是的,他們是在一個div.I可以提供一個ID輸入,如果我想。 – coder247 2010-06-28 14:38:02

回答

4

在jQuery中這樣的事情應該有一些假設工作:

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

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

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

的假設是,你的輸入字段都有一個類「TOADD」那你最後輸入字段有「的ID總'。

在純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; 
+0

DOJO在這個項目中使用。有沒有解決與dojo或正常的JavaScript? – coder247 2010-06-28 14:43:03

+0

@ coder247 - 我相信應該在純JS中工作。我從未使用DOJO,所以我不能直接對它說話。您可能需要將其封裝到函數中,然後將其綁定到每個輸入字段的onChange處理函數。 – 2010-06-28 14:47:49

+1

強制JavaScript來計算你應該添加的總數+ = elems [i] .value * 1 ;. * 1會使javascript將值作爲整數進行威脅。 – Email 2011-04-22 21:37:36

1

讓當我回顧我的筆記,但這裏是一個高層次的答案,我相信會的工作我解釋...(我的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>