問題總結的值td

Question

我有幾個tds ..我需要從他們每個獲得值，然後需要總和它。我面臨的錯誤=無法讀取null的屬性'innerText'。

我想不jQuery的解決這個問題。（僅使用JavaScript）

HTML代碼;

<td id="price1">300</td> 
<td id="price2">110</td> 
<td id="price3">350</td> 
<td id="price4">100</td> 
<td id="total">I need Total Here</td> 

Js code;

var price1 = parseInt(document.getElementById("price1").innerText); 
var price2 = parseInt(document.getElementById("price2").innerText); 
var price3 = parseInt(document.getElementById("price3").innerText); 
var price4 = parseInt(document.getElementById("price4").innerText); 
var total = (price1+price2+price3+price4); 

document.getElementById("total").innerHtml = total; 

錯誤;

Cannot read property 'innerText' of null 

Fiddle

PS：我是一個自學成才的programmer.I很新的Javascript.Excuse我任何語法錯誤，誤格式化代碼，我也做了一些愚蠢的，愚蠢的錯誤。除非它被包裹在裏面表格及行爲表>TR>TD

由於提前， Sangamesh

Answer 1

您需要等到頁面加載所以使用window.onload。此外，html標記不正確缺失table和tr，td元素應該是tr的子元素。並使用innerText設置最後的單元格值。

window.onload = function() { 
 
    var price1 = parseInt(document.getElementById("price1").innerText); 
 
    var price2 = parseInt(document.getElementById("price2").innerText); 
 
    var price3 = parseInt(document.getElementById("price3").innerText); 
 
    var price4 = parseInt(document.getElementById("price4").innerText); 
 
    var total = (price1 + price2 + price3 + price4); 
 

 
    document.getElementById("total").innerText = total; 
 
}

<table> 
 
    <tr> 
 
    <td id="price1">300</td> 
 
    <td id="price2">110</td> 
 
    <td id="price3">350</td> 
 
    <td id="price4">100</td> 
 
    <td id="total">I need Total Here</td> 
 
    </tr> 
 
</table>

Answer 2

你TD不可達。

完整代碼是（檢查小提琴here）

var price1 = parseInt(document.getElementById("price1").innerHTML, 10); 
var price2 = parseInt(document.getElementById("price2").innerHTML, 10); 
var price3 = parseInt(document.getElementById("price3").innerHTML, 10); 
var price4 = parseInt(document.getElementById("price4").innerHTML, 10); 
var total = (price1+price2+price3+price4); 

document.getElementById("total").innerHTML = total; 

Answer 3

• 你有無效的標記。 td元素必須被包裹在tabletr和tr（這是造成Cannot read property 'innerText' of null）
• 使用innerText分配total值（.innerHTML也能發揮作用）
• 注意：使用.textContent代替innerText作爲innerText是Non-standard屬性。

var price1 = parseInt(document.getElementById("price1").textContent); 
 
var price2 = parseInt(document.getElementById("price2").textContent); 
 
var price3 = parseInt(document.getElementById("price3").textContent); 
 
var price4 = parseInt(document.getElementById("price4").textContent); 
 
var total = (price1 + price2 + price3 + price4); 
 
document.getElementById("total").textContent = total; //innerHTML will work as well!

<table> 
 
    <tr> 
 
    <td id="price1">300</td> 
 
    <td id="price2">110</td> 
 
    <td id="price3">350</td> 
 
    <td id="price4">100</td> 
 
    <td id="total">I need Total Here</td> 
 
    </tr> 
 
</table>

Answer 4

使用window.onload，.textContent，+=運營商在.innerHTML來連接total現有html

<script> 
window.onload = function() { 
var price1 = parseInt(document.getElementById("price1").textContent); 
var price2 = parseInt(document.getElementById("price2").textContent); 
var price3 = parseInt(document.getElementById("price3").textContent); 
var price4 = parseInt(document.getElementById("price4").textContent); 
var total = (price1+price2+price3+price4); 

document.getElementById("total").innerHTML += " " + total; 
} 
</script> 

<table> 
<tr> 
<td id="price1">300</td> 
<td id="price2">110</td> 
<td id="price3">350</td> 
<td id="price4">100</td> 
<td id="total">I need Total Here</td> 
</tr> 
</table> 

Answer 5

你要打開和關閉表和TR標籤的TD HTML之外。與下面的代碼相同。 innerHtml應該是innerHTML。

<table> 
<tr> 
<td id="price1">300</td> 
<td id="price2">110</td> 
<td id="price3">350</td> 
<td id="price4">100</td> 
<td id="total">I need Total Here</td> 
</tr> 
</table> 


var price1 = parseInt(document.getElementById("price1").innerText); 
var price2 = parseInt(document.getElementById("price2").innerText); 
var price3 = parseInt(document.getElementById("price3").innerText); 
var price4 = parseInt(document.getElementById("price4").innerText); 
var total = (price1+price2+price3+price4); 

alert(total); 
document.getElementById("total").innerHTML = total;