Question

发布新内容但已访问此网站+/- 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>

Answer 1

嗯，当然有几种方法可以编写一个计算几个输入之和的函数。我将通过扩展你已有的东西来做到这一点，这样你就可以更好地理解你所做的代码实际上在做什么。最后，可能会有更好的解决方案涉及完全重写。

您必须为数据输入添加标记：

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')" />

然后，您可以添加任意数量的输入字段，并且无需修改函数即可自动计算它们。

Answer 2

一个想法是拥有一个动态的输入字段列表，这些字段由特定的类（下面的代码中为numbers）标记。你的函数可以先得到所有这些字段的列表，然后运行所有这些字段来总结它们。

function calc( classId, sumId ) {
  var els = document.querySelectorAll( '.' + classId ),
      sum = 0;

  for( var i=0, max=els.length; i<max; ++i ) {
     if( isNaN( els[i].value ) ) { 
       alert('Invalid entry: '+ els[i].value );
     } else {
       sum += els[i].value;
     }
  }

  document.getElementById( sumId ).value = sum;
}

您的输入字段将如下所示：

<input name="sum2" id="op2" value="" class="numbers" onChange="calc( 'numbers', 'result' );" />

有两点需要注意：

较旧的浏览器不支持document.querySelectorAll。您可能需要在这里使用polyfill。
最好通过JS分配事件。

第二个可以实现如下：

(function(){
  var els = document.querySelectorAll( '.' + inClass ),
      classId = 'numbers',
      sumId = 'result';

  for( var i=0, max=els.length; i<max; ++i ) {
     els[i].addEventListener( 'change', function(){ calc( classId, sumId ); } );
  }
})();

协助JavaScript sum函数

2 个答案: