Javascript - 爲什麼一個document.getElementById（）可以工作，而不是另一個？

我正在創建一個交互式發票，我對編程非常陌生，但迄今爲止這麼好。我可以找到我在這個網站上最棒的東西。Javascript - 爲什麼一個document.getElementById（）可以工作，而不是另一個？

在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是null或者不是一個對象，兩者之間的唯一區別就是它在不同的表格中的HTML位置，我嘗試過使用已經工作過的'idTotalLine'字段之一，但我繼續與同樣的錯誤。

幫助。謝謝。

來源

2013-12-16 PacaMama

我相信你想通過** **字符串'「idSTotalTax」'。會發生什麼是變量'idSTotalTax'已經引用ID爲IDSTotalTax的元素，因此您將DOM元素作爲參數傳遞給'getElementById'，這是行不通的。 –

什麼是您的JavaScript代碼中的「idSTotalTax」？ –

我修改了這一行（idSTotalTax）以包含單引號，它起作用。謝謝。把你的評論作爲答案，我可以接受它。 – PacaMama

您已有idSTotalTax DOM元素。相反，你的意思是將它作爲一個字符串使用，並將它傳遞給getElementById。用引號把它包起來。否則，您將DOM元素傳入document.getElementById。

document.getElementById("idSTotalTax").innerHTML

- 由於費利克斯&尖尖的指出較早的問題。

來源

2013-12-16 17:51:00

有什麼區別？請解釋你的解決方案，不要只是發佈代碼。 –

如果'idSTotalTax'沒有被定義，代碼會拋出一個'ReferenceError'。 –

編號idSTotalTax只是未定義。它不會拋出錯誤。 'document.getElementById（undefined）'的結果是'undefined'。如果你做了'idSTotalTax.SomeProperty'，那麼你會得到一個關於'idSTotalTax'不存在的錯誤。 –

這裏是一個解決方案女巫讓你不用打擾的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/

來源

2013-12-16 18:10:39 cocco

工作呼叫getElementById(vbuildTotalLine)查找其id是可變vbuildTotalLine的字符串值的元素。在這種情況下，對於某些值爲的N，這將是「idTotalLine N」，在1和15之間（含）。您可以在HTML中看到id="vbuildTotalLine"沒有元素。

非工作電話getElementById(idSTotalTax)，同樣，尋找匹配的id是變量idSTotalTax的字符串值的元素，但我看不出有什麼變化idSTotalTax在你的代碼的任何地方。如果您想查找id爲文字字符串「idSTotalTax」的文檔，那麼您需要將作爲的值傳遞給一個字符串，而不是您甚至未聲明或分配的變量的名稱。你可以做到這一點與這樣的代碼：

getElementById('idSTotalTax')

或許，在與第一部分保持一致，

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

來源

2013-12-16 18:31:04

Javascript - 爲什麼一個document.getElementById（）可以工作，而不是另一個？

回答

相關問題