CODEWITHSUNDEEP
javascripthtml
Sangamesh Davey
Sangamesh Davey

Reputation: 75

Issue in summing the values of td

I have a few tds ..I need to get the values from each of them and then need to total it.The error which i am facing = Cannot read property 'innerText' of null.

I want solve this problem without jquery..(only using 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;

Error;

Cannot read property 'innerText' of null

Fiddle

PS:I am a self-taught programmer.I am very new to Javascript.Excuse me for any grammar mistakes,wrongly formatted code,some silly,stupid mistake which i have done.

Thanks in advance, Sangamesh

Upvotes: 0

Views: 71

Answers (5)

Pranav C Balan
Pranav C Balan

Reputation: 115272

You need to wait until the page is loaded so use window.onload. Also the html markup is not correct missing table and tr, td element should be the child of tr. And set the last cell value using 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>

Upvotes: 1

Sunil kumar
Sunil kumar

Reputation: 771

You have to open and close table and tr tags outside your td html. Same as below code. The innerHtml should be 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;

Upvotes: 1

gurvinder372
gurvinder372

Reputation: 68433

Your td is not reachable unless it is wrapped inside table and row as table > tr > td.

Complete code being (check fiddle 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;

Upvotes: 0

Rayon
Rayon

Reputation: 36609

  • You have invalid markup. td elements must be wrapped in tr and tr in table(And that is causing Cannot read property 'innerText' of null)
  • Use innerText to assign total value(.innerHTML will work as well)
  • Note: Use .textContent instead of innerText as innerText is Non-standard property.

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>

Upvotes: 1

guest271314
guest271314

Reputation: 1

Use window.onload, .textContent, += operator at .innerHTML to concatenate total to existing 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>

Upvotes: 1

Related Questions