Javascript——为什么一个 document.getElementById() 工作而不是另一个？

Question

我正在创建一个交互式发票，我对编程非常陌生，但到目前为止一切都很好。我可以在各个网站上找到我最喜欢的东西，这是最好的。

在 HTML 中，我有各种表格，其中包含 40 个左右不同的输入字段，例如：

<tr>
<td><input type="text" id="idDescLine15" name="fDescLine15" size="50">  </td>
<td><input type="number" id="idQTY15" name="nQTY15" size="5">   </td>
<td><input type="number" id="idPrice15" name="nPrice15" size="5">   </td>
<td class="Checkbox"><input type="checkbox" id="idTax15" name="nTax1">  </td>
<td class="TotalCol"><p class="TotalLine" id="idTotalLine15">0.00</p>   </td>
</tr>

我有以下函数计算每行的总行数（数量 * 价格）。上面的 HTML 代码适用于第 15 行。所有其他设置都相同。

<script>
function Calculate()
{
    var vSTotalTax = 0;
    for (var i=1;i<16;i++)
    {
        var vbuildQTY = 'idQTY' + i;
        var vbuildPrice = 'idPrice' + i;
        var vbuildTotalLine = 'idTotalLine' + i;
        var vQTY=document.getElementById(vbuildQTY).value;
        var vPrice=document.getElementById(vbuildPrice).value;
        var vTotalLine = (vQTY * vPrice);
        document.getElementById(vbuildTotalLine).innerHTML = parseFloat(Math.round(vTotalLine * 100) / 100).toFixed(2);
        vSTotalTax = vSTotalTax + vTotalLine;
    }           
    document.getElementById(idSTotalTax).innerHTML = parseFloat(Math.round(vSTotalTax * 100) / 100).toFixed(2);
}
</script>

循环内的第一个“document.getElementById(vbuildTotalLine)”可以正常工作，并返回每一行的总数。

第二个“document.getElementById(idSTotalTax) 没有。它在 HTML 中的设置是一样的：

<tr>
<td><p class="TotalLabel">Sous-total taxable:</p></td>
<td class="TotalCol"><p class="TotalLine" id="idSTotalTax">0.00</p></td>
</tr>

当我单击“计算”按钮时，页面上显示第 238 行的 document.getElementById 为空或不是对象的错误。两者之间的唯一区别是它在不同表中的 HTML 位置。我尝试使用已经工作的“idTotalLine”字段之一，但我继续遇到同样的错误。

帮助。谢谢。

Answer 1

您已经拥有idSTotalTax DOM 元素。相反，您的意思是将其用作字符串，将其传递给getElementById。用引号括起来。否则，您会将 DOM 元素传递给 document.getElementById。

document.getElementById("idSTotalTax").innerHTML

-- 感谢 Felix 和 Pointy 指出较早的问题。

Answer 2

工作调用getElementById(vbuildTotalLine) 查找id 是变量的字符串值 vbuildTotalLine 的元素。在这种情况下，对于介于 1 和 15（含）之间的 N 的某个值，这将是“idTotalLineN”。您可以在 HTML 中看到没有带有 id="vbuildTotalLine" 的元素。

非工作调用getElementById(idSTotalTax) 类似地查找id 是变量的字符串值 idSTotalTax 的元素，但我在任何地方都看不到变量idSTotalTax你的代码。如果要查找 id 为文字字符串“idSTotalTax”的文档，则需要将该值 as 传递为字符串，而不是您甚至不声明或分配的变量的名称.你可以用这样的代码做到这一点：

getElementById('idSTotalTax')

或者，为了与第一部分保持一致，

var vbuildTotalTax = 'idSTotalTax';
...
getElementById(vbuildTotalTax);

Answer 3

这里有一个解决方案，女巫让你不用担心 id 的问题。

var tr=document.getElementsByTagName('tr'),trl=tr.length,total=0;

while(trl--){
 var td=tr[trl].getElementsByTagName('td'),
 v=td[1].firstChild.value*td[2].firstChild.value;
 td[4].firstChild.textContent=v.toFixed(2);
 total+=v;
}
totalBox=total.toFixed(2);

注意：使用 firstChild，<td> 和 <input> 之间不能有空格

所以你可以写这样的东西：

<tr>
<td><input type="text" name="desc[]" size="50"></td>
<td><input type="number" name="qty[]" size="5"></td>
<td><input type="number" name="price[]" size="5"></td>
<td class="Checkbox"><input type="checkbox" name="tax[]"></td>
<td class="TotalCol"><p></p></td>
</tr>

如果您发布此表格

你会得到一个这样的数组：

$_POST={
 desc:[
   item1,//item1
   item2 //item2
  ]
 qty:[
   1,//item1
   2//item2
  ]
 price:[
   20,//item1
   25//item2
  ]
 tax:[
   true,//item1
   false//item2
  ]
}

您可以在表单本身上添加计算功能。

所以：

document.forms[0].addEventListener('keyup',calculate,false);

示例

http://jsfiddle.net/gwtmM/