ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

javascript-使用OnClick()计算用户放入HTML表中的数字的平均值

2019-11-11 17:33:34  阅读:303  来源: 互联网

标签:html javascript


当前在识别我的HTML / JavaScript代码中的错误时遇到问题,这阻止了我的JavaScript函数计算由表用户输入的五个数字的平均值.

将数字输入所需的单元格后,单击“计算成绩”没有任何反应.努力看问题.

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>

解决方法:

我编辑了小提琴:https://jsfiddle.net/StarStep/m7v1j5zz/105/
并在计算按钮上添加了一个事件列表器:
< button id =“ myFunction” class =“ button1”>计算成绩< / 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;

标签:html,javascript
来源: https://codeday.me/bug/20191111/2021505.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有