Javascript 使用javascript自动计算输入值的总和
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3133264/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
auto calculate the sum of input values with javascript
提问by coder247
I've an html page which has many dynamically created input boxes. The number of text boxes vary each time. I want to calculate the sum of the numbers the user has entered, and disply it. When the user delete one number the sum should auto calculate.
我有一个 html 页面，其中有许多动态创建的输入框。文本框的数量每次都不同。我想计算用户输入的数字的总和，并显示它。当用户删除一个数字时，总和应该自动计算。
How can i do it with javascript? Thanks
我怎样才能用 javascript 做到这一点？谢谢
回答by g.d.d.c
In jQuery something like this should work with a few assumptions:
在 jQuery 中，这样的事情应该符合一些假设：
$('.toAdd').live('change', function() {
var total = 0;
$('.toAdd').each(function () {
total += $(this).val();
});
$('#total').val(total);
});
The assumptions being that your input fields all have the class 'toAdd' and that your final input field has an ID of 'total'.
假设您的输入字段都具有“toAdd”类，并且您的最终输入字段的 ID 为“total”。
In pure JS:
在纯 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;
回答by DiningPhilanderer
Let me elaborate when I review my notes but here is a high level answer that I believe will work... (My Java Script is very rusty)...
让我在回顾我的笔记时详细说明，但这里有一个我相信会起作用的高级答案......（我的 Java 脚本非常生疏）......
Make the input boxes share an attribute (or use tag) so you can get a collection to walk through no matter the size... Then on the onkeyup event on every input call this function that will sum the totals. Put the result into another entry with the ID you know beforehand...
使输入框共享一个属性（或使用标签），这样无论大小如何，您都可以获得一个可以遍历的集合……然后在每次输入的 onkeyup 事件上调用此函数，该函数将对总数求和。将结果放入另一个具有您事先知道的 ID 的条目中...
You will have to validate input because if one of them is not a number then the total will also be "NAN"
您必须验证输入，因为如果其中之一不是数字，则总数也将为“NAN”
Okay here is a complete working example you can build off of that I just threw together: It obviously needs a great deal of polishing on your end...
好的，这是一个完整的工作示例，您可以根据我刚刚拼凑的内容进行构建：它显然需要大量改进......
<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>
