php - 对文本输入求和，其中输入数量根据 for 循环而变化

Question

好的，问题来了。我目前有一个 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>

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

Answer 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