Yukihira Soma Yukihira Soma - 4 months ago 17
Javascript Question

Total sum is NaN - Javascript

Hello this is what i want to do. Everytime when the table change it will sum the total grade. But the problem is when im trying to sum it the total is NaN. Can someone help me about this?

HERE IS MY CODE.

<!DOCTYPE html>
<html>
<head>

<title></title>
<link rel="stylesheet" href ="css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="shortcut icon" type="img/png" href="img/gapclogo.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.table-bordered{
width: auto !important;
margin-top: 200px;
}
</style>
</head>
<body>


<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" onkeydown="Calculate();" id="quiz"></td>
<td contenteditable="true" onkeydown="Calculate();" id="atten"></td>
<td contenteditable="true" onkeydown="Calculate();" id="home"></td>
<td contenteditable="true" onkeydown="Calculate();" id="reci"></td>
<td contenteditable="true" onkeydown="Calculate();" id="me"></td>
<td id="td_grade"></td>
<td></td>
<td></td>
</tr>

</tbody>
</table>


<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
function Calculate()
{
var q = parseInt(document.getElementById('quiz').value);
var a = parseInt(document.getElementById('atten').value);
var h = parseInt(document.getElementById('home').value);
var r = parseInt(document.getElementById('reci').value);
var m = parseInt(document.getElementById('me').value);

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

document.getElementById('td_grade').innerHTML = grade;
}
</script>
</body>
</html>

Answer
  • 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>

Comments