刚开始发帖，但访问过该网站 +/- x1000。
我真的很想获得一些有关如何扩展此脚本以计算更多表单字段的信息。
当前此 html\jscript 页面将使用 OnChange 事件对 2 个表单字段执行 SUM 计算。一切都很好，但我无法将其他字段添加到计算范围中。
下面是工作代码，如果您想查看我当前的代码尝试，请告诉我。 非常感谢您提供的任何帮助。谢谢。
<html>
<head>
<title>Calulate</title>
<script type="text/javascript">
function calc(A,B,SUM) {
var one = Number(A);
if (isNaN(one)) { alert('Invalid entry: '+A); one=0; }
var two = Number(document.getElementById(B).value);
if (isNaN(two)) { alert('Invalid entry: '+B); two=0; }
document.getElementById(SUM).value = one + two;
}
</script>
<body>
<form name="form" >
Enter a number:
<input name="sum1" id="op1" value="" onChange="calc(this.value,'op2','result')" />
and another number:
<input name="sum2" id="op2" value="" onChange="calc(this.value,'op1','result')" />
<br>
Their sum is:
<input name="sum" value="" id="result" readonly style="border:0px;">
</form>
</body>
</html>
最佳答案
当然，有多种方法可以编写计算多个输入之和的函数。我将通过扩展您已有的内容来做到这一点，以便您更好地理解您所拥有的代码实际上在做什么。最后，可能会有更好的解决方案，涉及完全重写。
您必须添加数据输入标记:
and a third number:
<input name="sum3" id="op3" value="" />
您的函数声明必须进行修改才能接受另一个参数:
function calc(A,B,C,SUM) {
您的函数体必须像处理 A 和 B 一样处理此参数:
var three = Number(document.getElementById(C).value);
if (isNaN(three)) { alert('Invalid entry: '+C); three=0; }
您的总和必须考虑这个新数字:
document.getElementById(SUM).value = one + two + three;
所有三个输入字段都必须更新其 onChange 属性，以传递我们定义的新 C 参数:
<input name="sum1" id="op1" value="" onChange="calc(this.value,'op2','op3','result')" />
<input name="sum2" id="op2" value="" onChange="calc(this.value,'op1','op3','result')" />
<input name="sum3" id="op3" value="" onChange="calc(this.value,'op1','op2','result')" />
现在，为了让您了解可以采取哪些不同的做法，您可以通过类名访问它们，而不是通过 ID 访问元素。例如，您可以将类名 calc 添加到所有三个输入字段。您可以让函数知道这个类名，或者将其作为参数传递。在这种情况下，该函数不需要接收 A、B 和 C，而只需要类名和 ID输出字段。
function(className, SUM) {
...
}
在您的函数内，您将能够找到该类名称的所有元素:
var inputs = document.getElementsByClassName(className);
并迭代它们，随时添加值:
var sum = 0;
for(var i = 0; i < inputs.length; i++) {
var input = inputs[i];
var num = Number(input.value);
if(isNaN(num)) {
alert('Invalid value: ' + input.value);
num = 0;
}
sum += num;
}
document.getElementById(SUM).value = sum;
然后，您将添加类名称并更新您的 onChange 属性，如下所示:
<input name="sum1" class="calc" onChange="calc('calc','result')" />
<input name="sum2" class="calc" onChange="calc('calc','result')" />
<input name="sum3" class="calc" onChange="calc('calc','result')" />
然后，您将能够添加任意数量的输入字段，并且它们将自动计算，而无需修改函数。
关于javascript - JavaScript sum 函数的帮助，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10281505/