javascript - 使用循环解析来自输入框的数据时出现问题(平均成绩计算器)

Question

我想不出一种方法可以让我将数据从数字输入框传送到循环并允许我将其相加并求平均值。我已将问题范围缩小到程序中的一行。

我将提供部分代码，希望有人能告诉我哪里出错了。我要么得到“NaN、null、undefined，要么得到我的 html 文本框代码，例如 <input type=.... > 。

这是代码:

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

    for (var x = 3; x < cells.length; x++) {
      var cell = cells[x];
      // sum += parseInt(cell.innerHTML)
      // var test = document.getElementById(cell);
      //sum += document.getElementById(table.rows[i].cells[x].value);
      //sum += (table.rows[i].cells[x].innerHTML)
      //sum += document.getElementById();
      //sum += (table.rows[i].cells[x].children[0].value);
      //sum += document.getElementById(table.rows.cell).value;

    }
    var average = sum / cells.length;
    rows[i].innerHTML += "<td>" + average + "</td>";
    }
  }

  function constraint(val) {
    if (Number(val.value) > 100) {
      val.value = 100
    }
  }

<table id="tbl">
  <tr>
    <th> Name </th>
    <th> ID </th>
    <th> 1 (%)</th>
    <th> 2 (%)</th>
    <th> 3 (%)</th>
    <th> 4 (%)</th>
    <th> 5 (%)</th>
    <th> Final % </th>
  </tr>

  <tr>
    <td align=center> John Doe </td>
    <td> 1 </td>
    <td> <input type="number" placeholder="-" size="2" maxlength="3" id="s1g1" oninput="constraint(this)"> </td>
    <td> <input type="number" placeholder="-" size="2" maxlength="3" id="s1g2" oninput="constraint(this)"> </td>
    <td> <input type="number" placeholder="-" size="2" maxlength="3" id="s1g3" oninput="constraint(this)"> </td>
    <td> <input type="number" placeholder="-" size="2" maxlength="3" id="s1g4" oninput="constraint(this)"> </td>
    <td> <input type="number" placeholder="-" size="2" maxlength="3" id="s1g5" oninput="constraint(this)"> </td>
    <!--  <td id="s1gf"> - </td> -->
  </tr>

</table>

<button id="calcGrades" onclick="calcGrades()">Calculate Final Grades</button>

我已经尝试了每一行注释掉的行，有些给出 NaN，有些未定义，有些为 null 等。

我不想对所有学生成绩进行硬编码，因为我必须对 10 名学生进行硬编码，这意味着要更改大量 ID。

Answer 1

假设rows类似于 document.getElementsByTagName('tr') :

sum += parseInt(cell.getElementsByTagName('input')[0].value)

在这里我们搜索input在每个单元格内并获取输入值。由于该值的类型为 String我们需要将其转换为 Number添加到 sum 之前

另外，请记住，数组和类数组对象在 js 中是零索引的。 所以如果你想从第三个单元格开始，我们应该从索引 2 开始 for (var x = 2; x < cells.length; x++) {

附注在 HTML5 中不需要 constrain功能 - 有max您案例的输入属性

P.P.S 这是我想到的更紧凑的解决方案 https://jsfiddle.net/pj2L6h4d/3/