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>

第一个＆＃34; document.getElementById（vbuildTotalLine）＆＃34;在循环内部工作正常并返回每行的总数。

第二个＆＃34; 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为null或不是对象。两者之间的唯一区别是HTML中的位置，它位于不同的表中。我尝试使用其中一个idTotalLine＆＃39;已经工作的字段，但我仍然有同样的错误。

帮助。感谢。

Answer 1

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

document.getElementById("idSTotalTax").innerHTML

- 感谢Felix＆amp;指出早先的问题很尖锐。

Answer 2

这是一个解决方案，让你不要打扰你的身份。

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/

Answer 3

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

非工作电话getElementById(idSTotalTax)同样会查找id是变量的字符串值的元素 idSTotalTax，但我看不到代码中的任何位置都有变量idSTotalTax。如果要查找其id为文字字符串“idSTotalTax”的文档，则需要将该值作为传递给字符串，而不是您甚至未声明或赋值的变量名称。您可以使用以下代码执行此操作：

getElementById('idSTotalTax')

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

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

Javascript - 为什么一个document.getElementById（）工作而不是另一个？

3 个答案: