Currently having problems identifying an error I have in my HTML/JavaScript code which is preventing my JavaScript function calculating the average of five numbers which is put in by the user of the table.

Nothing happens when I click "Calculate Grade" after I put in numbers into the required cells. Struggling to see the problem.

var table = document.getElementById("myTable");
var rows = table.rows;
for (var i = 0; i < rows.length; i++) {
  var cells = rows[i].cells;
  var sum = 0;
  for (var x = 0; x < cells.length; x++) {
    var cell = cells[x];
    sum += parseInt(cell.innerHTML);
  }
  var average = sum / cells.length;
  rows[i].innerHTML += "<td>" + average + "</td>";
}

<table id="myTable" style="width:100%">
  <tr>
    <th id="StudentName" bgcolor="FFF55A">Name</th>
    <th id="IDnumber" bgcolor="#FFF55A">ID</th>
    <th bgcolor="#FFF55A">Assignment 1</th>
    <th bgcolor="#FFF55A">Assignment 2</th>
    <th bgcolor="#FFF55A">Assignment 3</th>
    <th bgcolor="#FFF55A">Assignment 4</th>
    <th bgcolor="#FFF55A">Assignment 5</th>
    <th bgcolor="#FFF55A">Final</th>
  </tr>
  <tr>
    <td contenteditable='false'>Person1 </td>
    <td>1546396</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td contenteditable='false'>Person2</td>
    <td contenteditable='false'>45942544</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td contenteditable='false'>Person3</td>
    <td contenteditable='false'>48498465</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td contenteditable='false'> Person4</td>
    <td contenteditable='false'>4964984</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td contenteditable='false'>Person5</td>
    <td contenteditable='false'> 5686846</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td contenteditable='false'>Person6</td>
    <td contenteditable='false'>498465</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td contenteditable='false'>Person7</td>
    <td contenteditable='false'>654684</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td contenteditable='false'>Person8</td>
    <td contenteditable='false'>6498497</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td contenteditable='false'>Person9</td>
    <td contenteditable='false'>8749846</td>
    <td contenteditable='true'>2</td>
    <td contenteditable='true'>45</td>
    <td contenteditable='true'>57</td>
    <td contenteditable='true'>2</td>
    <td contenteditable='true'>4</td>
  </tr>
  <tr>
    <td contenteditable='false'>Person10</td>
    <td contenteditable='false'>984894</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
</table>
<button onclick="myFunction()" class="button1">Calculate grade</button>

Currently having problems identifying an error I have in my HTML/JavaScript code which is preventing my JavaScript function calculating the average of five numbers which is put in by the user of the table.

Nothing happens when I click "Calculate Grade" after I put in numbers into the required cells. Struggling to see the problem.

var table = document.getElementById("myTable");
var rows = table.rows;
for (var i = 0; i < rows.length; i++) {
  var cells = rows[i].cells;
  var sum = 0;
  for (var x = 0; x < cells.length; x++) {
    var cell = cells[x];
    sum += parseInt(cell.innerHTML);
  }
  var average = sum / cells.length;
  rows[i].innerHTML += "<td>" + average + "</td>";
}

<table id="myTable" style="width:100%">
  <tr>
    <th id="StudentName" bgcolor="FFF55A">Name</th>
    <th id="IDnumber" bgcolor="#FFF55A">ID</th>
    <th bgcolor="#FFF55A">Assignment 1</th>
    <th bgcolor="#FFF55A">Assignment 2</th>
    <th bgcolor="#FFF55A">Assignment 3</th>
    <th bgcolor="#FFF55A">Assignment 4</th>
    <th bgcolor="#FFF55A">Assignment 5</th>
    <th bgcolor="#FFF55A">Final</th>
  </tr>
  <tr>
    <td contenteditable='false'>Person1 </td>
    <td>1546396</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td contenteditable='false'>Person2</td>
    <td contenteditable='false'>45942544</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td contenteditable='false'>Person3</td>
    <td contenteditable='false'>48498465</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td contenteditable='false'> Person4</td>
    <td contenteditable='false'>4964984</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td contenteditable='false'>Person5</td>
    <td contenteditable='false'> 5686846</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td contenteditable='false'>Person6</td>
    <td contenteditable='false'>498465</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td contenteditable='false'>Person7</td>
    <td contenteditable='false'>654684</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td contenteditable='false'>Person8</td>
    <td contenteditable='false'>6498497</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td contenteditable='false'>Person9</td>
    <td contenteditable='false'>8749846</td>
    <td contenteditable='true'>2</td>
    <td contenteditable='true'>45</td>
    <td contenteditable='true'>57</td>
    <td contenteditable='true'>2</td>
    <td contenteditable='true'>4</td>
  </tr>
  <tr>
    <td contenteditable='false'>Person10</td>
    <td contenteditable='false'>984894</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
</table>
<button onclick="myFunction()" class="button1">Calculate grade</button>

• javascript
• html

Share Improve this question Follow edited Feb 25, 2017 at 21:43 Cathal Brady asked Feb 24, 2017 at 21:21 Cathal BradyCathal Brady 11722 gold badges44 silver badges1010 bronze badges 3

• the script wont work on jsfiddle becuse it's placed inside the head section while the dom element is not yet ready – KeySee Commented Feb 24, 2017 at 21:43
• Remember to vote for any answer if your problem has been solved – KeySee Commented Feb 25, 2017 at 12:46
• Yes KARC i will, I am still looking at domink's extra functionality he added trying to understand it, i will vote soon – Cathal Brady Commented Feb 25, 2017 at 13:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

I have edited yout fiddle a bit: https://jsfiddle/StarStep/m7v1j5zz/105/ and added an event listner on the calculate button: <button id="myFunction" class="button1">Calculate grade</button>

function myFunction() {
   var table = document.getElementById("myTable");
   var rows = table.rows;

   for (var i = 1; i < rows.length; i++) {
     var cells = rows[i].cells;
     var sum = 0;
         var numbers = 0;
     for (var x = 2; x < (cells.length -1); x++) {
       var cell = cells[x];
       var addme = parseInt(cell.innerHTML);
       if(!isNaN(addme)) {       
          sum += addme;
          numbers++;
       }
     }
     var average = sum / numbers;
     rows[i].cells[7].innerHTML = "<td>" + Math.round(average) + "</td>";
   }
 }

document.getElementById('myFunction').onclick = myFunction;

Place the JavaScript in <head> tag. You cannot place myFunction after the onclick. This will work if you want to use inline script declare script before onclick.

<script>
function myFunction() {
 var table=document.getElementById("myTable");
var rows=table.rows;

for(var i = 1; i < rows.length; i++){
 var cells = rows[i].cells;
 var sum = 0;

 for(var x = 2; x < cells.length; x++){
  var cell = cells[x];
  sum += parseInt(cell.innerHTML);
 }
 var average = sum/cells.length;
 rows[i].innerHTML += "<td>"+Math.round(average)+"</td>";
}
}
</script>

<button  onclick="myFunction()" class="button1">Calculate grade</button>

There are four main problems in your script:

1. If a user enters empty string or string that is not convertable to a Number, you're adding NaN to your sum. And even if user enters four assignment correctly but the first one is incorrect, the result is NaN because NaN + 1 + 2 = NaN

2. While calculating the average, you're dividing the sum by the length of all of the cells. And the first two cells (name, ID) shoudn't be counted.

3. I believe that if a user omits some assignment, your script should calculate the average correctly anyway. So if there are only three assignment entered, your divisor (cells.length in your current version) also should be equal to 3 to calculate the average correctly.

4. Finally, but less importantly, I think that if a user doesn't enter any assignment, the average should be 0, not NaN.

I edited your script with the changes above:

function myFunction() {

  var table=document.getElementById("myTable");
  var rows=table.rows;

  for (var i = 1; i < rows.length; i++) {
    var cells = rows[i].cells;
    var sum = 0;
    var cellsLength = cells.length - 2; // the first two cells shouldn't be counted 
    for (var x = 2; x < cells.length; x++) {
      var cell = cells[x];
      var toAdd = Number(cells[x].innerHTML) ? Number(cells[x].innerHTML) : 0; // prevent adding NaN
      sum += toAdd;
      if (!Number(cells[x].innerHTML)) {
        cellsLength--; // if the value is invalid, it shouldn;t be counted while calculating the average
      }
    }
    var average = sum/cellsLength || 0; // calculate the average, but if it's undefined or NaN, replace it with 0
    rows[i].innerHTML += "<td>" + Math.round(average) + "</td>";
  }
}

Feel free to check out updated fiddle: https://jsfiddle/m7v1j5zz/110/