Problem beim summieren der Werte von td

Question

Ich habe ein paar tds ..Ich muss die Werte von jedem von ihnen bekommen und dann müssen sie total.The Fehler, dem ich gegenüberstehen = Kann Eigenschaft 'innerText' von null nicht lesen.

ich lösen möchte dieses Problem ohne jquery .. (nur mit Javascript)

Html-Code;

<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; 

Fehler;

Cannot read property 'innerText' of null 

Fiddle

PS: Ich bin ein Autodidakt programmer.I bin sehr neu mich für alle Grammatikfehler Javascript.Excuse, falsch formatiert Code, einige dumme, dumme Fehler, die ich gemacht habe.

Vielen Dank im Voraus, Sangamesh

Answer 1

Sie müssen warten, bis die Seite so verwenden geladen wird window.onload. Auch die HTML-Markup ist nicht korrekt fehlt table und tr, td Element sollte das Kind von tr sein. Stellen Sie den letzten Zellenwert unter Verwendung von innerText ein.

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

Ihre td ist nicht erreichbar, wenn es innerhalb Tisch gewickelt ist und eine Zeile als Tabelle>tr>td.

kompletter Code sein (überprüfen Geige 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

• Sie haben ungültigen Markup. td Elemente müssen in tr und tr in table gewickelt werden (Und das verursacht Cannot read property 'innerText' of null)
• Verwenden innerTexttotal Wert zuweisen (.innerHTML wird auch funktionieren)
• Hinweis: Verwenden Sie .textContent statt innerText als innerText ist Non-standard Eigentum.

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

Verwenden window.onload, .textContent, += Operator bei .innerHTML verketten total an bestehende 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

Sie müssen sich öffnen und schließen Tisch und tr-Tags außerhalb td html. Dasselbe wie unter dem Code. Der innereHtml sollte innerHTML sein.

<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;