admin管理员组

文章数量:1391955

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 edited Feb 25, 2017 at 21:43 Cathal Brady asked Feb 24, 2017 at 21:21 Cathal BradyCathal Brady 1172 gold badges4 silver badges10 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

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/

本文标签： javascriptTo Calculate average of numbers put in HTML table by user using OnClick()Stack Overflow

版权声明：本文标题：javascript - To Calculate average of numbers put in HTML table by user using OnClick() - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744750656a2623155.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。