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>

More Related Contents:

  1. view php msg in alert javascript [duplicate]
  2. Cannot read property ‘addEventListener’ of null using querySelector [closed]
  3. How to create links on the column of table in SAPUI5
  4. javascript: Uncaught SyntaxError: Unexpected identifier
  5. Loading local JSON file
  6. Get array of object’s keys
  7. Promise.all consumes all my RAM
  8. Javascript require() function giving ReferenceError: require is not defined
  9. Is Node.js native Promise.all processing in parallel or sequentially?
  10. Syntax for an async arrow function
  11. Sorting options elements alphabetically using jQuery
  12. HTML Table to Excel Javascript
  13. What are some empirical technical reasons not to use jQuery? [closed]
  14. Use of @ symbol in Node module names [duplicate]
  15. Add click event to iframe
  16. Can I get image from canvas element and use it in img src tag?
  17. Async / await vs then which is the best for performance?
  18. Restart an animated GIF from JavaScript without reloading the image
  19. Counting and limiting words in a textarea
  20. Slow down scroll to top event by jQuery animate
  21. Node.js – asynchronous module loading
  22. Is there a plugin that allows me to automatically unminify the Javascript included on a site? [closed]
  23. How do object or method chaining work in jQuery?
  24. How to restrict access to routes in react-router?
  25. Advantages of setting the “constructor” Property in the “prototype”
  26. Get Image or byte data with http
  27. Why is it necessary to use bind when working with ES6 and ReactJS?
  28. Karate Framework – Why Javascript function returns an array with NaN values?
  29. how to fire event on file select
  30. How to convert a byte array into an image?

Leave a Comment