对文本输入求和，其中输入的数量基于 for 循环而变化答案

【问题标题】：Summing text inputs in which the number of inputs changes based on a for loop对文本输入求和，其中输入的数量基于 for 循环而变化
【发布时间】：2013-07-25 19:45:23
【问题描述】：

好的，问题来了。我目前有一个成功汇总所有输入框的 javascript。

    <script>
    function myFunction(tBox)
    {
    var a=document.getElementById("hous1");
    var b=document.getElementById("hous2");
    var c=document.getElementById("hous3");
    w=Number(a.value);
    x=Number(b.value);
    y=Number(c.value);
    t=w+x+y;
    document.getElementById("test").innerHTML=t;
    }
    </script>

其中文本输入框的数量是动态创建的，并基于：

   <?php
   for ($i=1; $1<=$housingcount; $i++){
   echo '<input size="',11,'" type="text" name="cavqty',$i,'" id="hous',$i,'" onchange="myFunction(value)"/>
   ?>

$housingcount 只计算匹配 mysql 查询的行数。此外，该函数只需使用以下命令输出：

    <p id="test"></p>

只要文本输入框的数量等于三个，此代码就可以正常工作。我的问题是如何编写我的 javascript 以便能够接受任意数量的文本输入，而不是被限制为预定义的数字，例如三个？

【问题讨论】：

标签： php javascript mysql loops onchange

【解决方案1】：

您必须检查所有输入元素并检查它们的名称，检查前缀“hous”。例如：

var sum = 0;

var elts = document.getElementsByTagName('input');
for( var i=0; i<elts.length; i++ ) {
    var elt = elts[i];
    if( elt.id && elt.id.indexOf( 'hous' ) === 0 ) sum += Number( elt.value );
}

console.log( sum );

此解决方案不需要 jQuery。在这里查看它的实际效果：

http://www.codepen.io/anon/pen/xmrGu

【讨论】：

【解决方案2】：

我不知道我是否理解正确，但这可以总结你所有的输入，考虑到只有整数，如果你想浮动，告诉我我会找出来的。

HTML

<input size="11" type="text" name="cavqty" id="hous" onkeyup="myFunction(this.value)"/>
<input size="11" type="text" name="cavqty" id="hous" onkeyup="myFunction(this.value)"/>
<input size="11" type="text" name="cavqty" id="hous" onkeyup="myFunction(this.value)"/>

Javascript

totalSum = 0;
myFunction = function (value) {
    totalSum += parseInt(value, 10);
    console.log(totalSum);
}

你可以在Jsfiddle看到工作

【讨论】：