Yukihira Soma - 1 year ago 78
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>

<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.table-bordered{
width: auto !important;
margin-top: 200px;
}
</style>
<body>

<table class="table table-bordered" align="center" >

<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">Equivalent</th>
<th width="100">Remarks</th>

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

}
</script>
</body>
</html>
``````

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

}``````
``````.table-bordered {
width: auto !important;
margin-top: 200px;
}``````
``````<table class="table table-bordered" align="center">

<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">Equivalent</th>
<th width="100">Remarks</th>
</tr>
<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>