2

刚发帖，但去过这个网站 +/- 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>
4

2 回答 2

2

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

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

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，而只需要类名和输出字段的 ID。BC

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

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

于 2012-04-23T13:37:01.110 回答
0

一个想法是有一个输入字段的动态列表，这些字段由特定的类标记（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' );" />

有两点需要注意：

  1. 较旧的浏览器不支持document.querySelectorAll. 你可能需要一个 polyfill。

  2. 最好也由 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 ); } );
  }
})();
于 2012-04-23T13:41:16.833 回答