[Solved] Total sum is NaN – Javascript

by


  • Use Unary plus(+) or Number instead of parseInt as parseInt('') will be evaluated as NaN

  • Use textContent instead of value

  • Note: Use onInput instead of onkeydown

function Calculate() {
  var q = +(document.getElementById('quiz').textContent);
  var a = +(document.getElementById('atten').textContent);
  var h = +(document.getElementById('home').textContent);
  var r = +(document.getElementById('reci').textContent);
  var m = +(document.getElementById('me').textContent);

  var grade = q + a + h + r + m;

  document.getElementById('td_grade').innerHTML = grade;
}
.table-bordered {
  width: auto !important;
  margin-top: 200px;
}
<table class="table table-bordered" align="center">

  <thead>
    <tr>
      <th width="300">Name</th>
      <th width="100">Long Quiz 20%</th>
      <th width="100">Attendance 10%</th>
      <th width="100">Homework/Seatwork 20%</th>
      <th width="100">Recitation 10%</th>
      <th width="100">Major Exam 40%</th>
      <th width="100">Grade</th>
      <th width="100">Equivalent</th>
      <th width="100">Remarks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td contenteditable="true" oninput="Calculate();" id="quiz"></td>
      <td contenteditable="true" oninput="Calculate();" id="atten"></td>
      <td contenteditable="true" oninput="Calculate();" id="home"></td>
      <td contenteditable="true" oninput="Calculate();" id="reci"></td>
      <td contenteditable="true" oninput="Calculate();" id="me"></td>
      <td id="td_grade"></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

1

solved Total sum is NaN – Javascript