Question

我正在尝试与正在执行作业的学生一起创建一个随机表。我想按下按钮时计算每个学生的平均成绩。谁能解释我做错了什么？

function calculate() {
  var grade1 = parseFloat(document.getElementbyId('shauna1').value);
  var grade2 = parseFloat(document.getElementbyId('shauna2').value);
  var grade3 = parseFloat(document.getElementbyId('shauna3').value);
  var grade4 = parseFloat(document.getElementbyId('shauna4').value);
  var grade5 = parseFloat(document.getElementbyId('shauna5').value);
  var average = (grade1 + grade2 + grade3 + grade4 + grade5) / 5;
  document.getElementById("shaunafinal").innerHTML = average;
}

<table style="width:100%">
  <tr>
    <th>Student ID </th>
    <th>Student Name </th>
    <th>Assignment 1 </th>
    <th>Assignment 2 </th>
    <th>Assignment 3 </th>
    <th>Assignment 4 </th>
    <th>Assignment 5 </th>
    <th>Final Grade </th>
  </tr>
  <tr>
    <!-- contenteditable="true" means you can edit it.
          id = "left" lets you edit part of the table differently than the rest -->
    <td id="left">16710169 </td>
    <td id="left">Shauna Goodman </td>
    <td id="shauna1" contenteditable="true">70 </td>
    <td id="shauna2" contenteditable="true">60 </td>
    <td id="shauna3" contenteditable="true">40 </td>
    <td id="shauna4" contenteditable="true">90 </td>
    <td id="shauna5" contenteditable="true">88 </td>
    <td id="shaunafinal"> </td>
  </tr>
  <tr>
    <td id="left">16710170 </td>
    <td id="left">Paul Smith </td>
    <td contenteditable="true">55 </td>
    <td contenteditable="true">- </td>
    <td contenteditable="true">90 </td>
    <td contenteditable="true">45 </td>
    <td contenteditable="true">80 </td>
    <td>- </td>
  </tr>
  <tr>
    <td id="left">16710171 </td>
    <td id="left">Marie Mckenna </td>
    <td contenteditable="true">50 </td>
    <td contenteditable="true">66 </td>
    <td contenteditable="true">- </td>
    <td contenteditable="true">70 </td>
    <td contenteditable="true">90 </td>
    <td>- </td>
  </tr>
  <tr>
    <td id="left">16710172 </td>
    <td id="left">Saoirse McGuire </td>
    <td contenteditable="true">45 </td>
    <td contenteditable="true">85 </td>
    <td contenteditable="true">95 </td>
    <td contenteditable="true">81 </td>
    <td contenteditable="true">59 </td>
    <td>- </td>
  </tr>
  <tr>
    <td id="left">16710173 </td>
    <td id="left">Nathaniel Kingston </td>
    <td contenteditable="true">- </td>
    <td contenteditable="true">70 </td>
    <td contenteditable="true">46 </td>
    <td contenteditable="true">30 </td>
    <td contenteditable="true">28 </td>
    <td>- </td>
  </tr>
  <tr>
    <td id="left">16710174 </td>
    <td id="left">Adam Jones </td>
    <td contenteditable="true">96 </td>
    <td contenteditable="true">- </td>
    <td contenteditable="true">90 </td>
    <td contenteditable="true">78 </td>
    <td contenteditable="true">63 </td>
    <td>- </td>
  </tr>
  <tr>
    <td id="left">16710175 </td>
    <td id="left">Melanie Song </td>
    <td contenteditable="true">96 </td>
    <td contenteditable="true">90 </td>
    <td contenteditable="true">95 </td>
    <td contenteditable="true">98 </td>
    <td contenteditable="true">97 </td>
    <td>- </td>
  </tr>
  <tr>
    <td id="left">16710176 </td>
    <td id="left">Sarah Cesal </td>
    <td contenteditable="true">70 </td>
    <td contenteditable="true">50 </td>
    <td contenteditable="true">- </td>
    <td contenteditable="true">25 </td>
    <td contenteditable="true">38 </td>
    <td>- </td>
  </tr>
  <tr>
    <td id="left">16710177 </td>
    <td id="left">Teresa Purcell </td>
    <td contenteditable="true">70 </td>
    <td contenteditable="true">50 </td>
    <td contenteditable="true">10 </td>
    <td contenteditable="true">25 </td>
    <td contenteditable="true">38 </td>
    <td>- </td>
  </tr>
  <tr>
    <td id="left">16710178 </td>
    <td id="left">James Hennessey </td>
    <td contenteditable="true">80 </td>
    <td contenteditable="true">50 </td>
    <td contenteditable="true">40 </td>
    <td contenteditable="true">25 </td>
    <td contenteditable="true">98 </td>
    <td>- </td>
  </tr>
</table>

<button type="button" onclick="calculate()">
          Submit
         </button>

javascript部分应该仅适用于第一个学生，但我希望在继续使用其他部分之前，该部分可以正常工作。

Answer 1

试试这个：

document.getElementById('shauna1').innerText;

你写了＆＃34; getElementById＆＃34;错误...加 - id＆s 39应该是每个元素的唯一值。否则，改用class。

Answer 2

您在JavaScript代码中遇到两个问题：

getElementbyId中的错字。它应该是getElementById。
您无法获得td的值.value。您应该使用.innerText代替。

正确的代码应如下所示：

function calculate() {
    var grade1 = parseFloat(document.getElementById('shauna1').innerText);
    var grade2 = parseFloat(document.getElementById('shauna2').innerText);
    var grade3 = parseFloat(document.getElementById('shauna3').innerText);
    var grade4 = parseFloat(document.getElementById('shauna4').innerText);
    var grade5 = parseFloat(document.getElementById('shauna5').innerText);
    var average = (grade1+grade2+grade3+grade4+grade5)/5;
    document.getElementById("shaunafinal").innerHTML = average;
}

此外，您还可以找到有效的fiddle。

Answer 3

function calculate() {
  // get table element
  let table = document.querySelector('table');
  // get all rows
  let rows = table.querySelectorAll('tr');
  // remove thead and loop over rows
  Object.keys(rows).forEach(key => {
    let row = rows[key];
    // get data elements
    let datasets = row.querySelectorAll('.d');
    let total = 0;
    // loop over datasets
    datasets.forEach(dataset => {
      // add up all values
      total += parseInt(dataset.innerHTML);
    });
    // calc the avg
    let avg = total / datasets.length;
    try {
        // handle dom mm exeption for thead
        let el = row.getElementsByClassName('davg')[0].innerHTML = avg;
    } catch (e) {}
  });
}

<table style="width:100%">
  <tr>
    <th>Student ID </th>
    <th>Student Name </th>
    <th>Assignment 1 </th>
    <th>Assignment 2 </th>
    <th>Assignment 3 </th>
    <th>Assignment 4 </th>
    <th>Assignment 5 </th>
    <th>Final Grade </th>
  </tr>
  <tr> 
  <!-- contenteditable="true" means you can edit it.
  id = "left" lets you edit part of the table differently than the rest -->
    <td id = "left">16710169 </td>
    <td id = "left">Shauna Goodman </td>
    <td class="d" contenteditable="true">70 </td>
    <td class="d" contenteditable="true">60 </td>
    <td class="d" contenteditable="true">40 </td>
    <td class="d" contenteditable="true">90 </td>
    <td class="d" contenteditable="true">88 </td>
    <td class="davg">-</td>
  </tr>
  <tr>
    <td id = "left">16710170 </td>
    <td id = "left">Paul Smith </td>
    <td class="d" contenteditable="true">70 </td>
    <td class="d" contenteditable="true">40 </td>
    <td class="d" contenteditable="true">40 </td>
    <td class="d" contenteditable="true">30 </td>
    <td class="d" contenteditable="true">88 </td>
    <td class="davg"> </td>
  </tr>
  <tr>
    <td id = "left">16710171 </td>
    <td id = "left">Marie Mckenna </td>
    <td class="d" contenteditable="true">74 </td>
    <td class="d" contenteditable="true">61 </td>
    <td class="d" contenteditable="true">40 </td>
    <td class="d" contenteditable="true">97 </td>
    <td class="d" contenteditable="true">118 </td>
    <td class="davg"> </td>
  </tr>
  <tr>
    <td id = "left">16710172 </td>
    <td id = "left">Saoirse McGuire </td>
    <td class="d" contenteditable="true">30 </td>
    <td class="d" contenteditable="true">60 </td>
    <td class="d" contenteditable="true">60 </td>
    <td class="d" contenteditable="true">40 </td>
    <td class="d" contenteditable="true">88 </td>
    <td class="davg"> </td>
  </tr>
  <tr>
    <td id = "left">16710173 </td>
    <td id = "left">Nathaniel Kingston </td>
    <td class="d" contenteditable="true">70 </td>
    <td class="d" contenteditable="true">60 </td>
    <td class="d" contenteditable="true">40 </td>
    <td class="d" contenteditable="true">170 </td>
    <td class="d" contenteditable="true">88 </td>
    <td class="davg"> </td>
  </tr>
  <tr>
    <td id = "left">16710174 </td>
    <td id = "left">Adam Jones </td>
    <td class="d" contenteditable="true">70 </td>
    <td class="d" contenteditable="true">60 </td>
    <td class="d" contenteditable="true">10 </td>
    <td class="d" contenteditable="true">90 </td>
    <td class="d" contenteditable="true">118 </td>
    <td class="davg"> </td>
  </tr>
  <tr>
    <td id = "left">16710175 </td>
    <td id = "left">Melanie Song </td>
    <td class="d" contenteditable="true">70 </td>
    <td class="d" contenteditable="true">70 </td>
    <td class="d" contenteditable="true">40 </td>
    <td class="d" contenteditable="true">10 </td>
    <td class="d" contenteditable="true">88 </td>
    <td class="davg"> </td>
  </tr>
  <tr>
    <td id = "left">16710176 </td>
    <td id = "left">Sarah Cesal </td>
    <td class="d" contenteditable="true">70 </td>
    <td class="d" contenteditable="true">60 </td>
    <td class="d" contenteditable="true">10 </td>
    <td class="d" contenteditable="true">10 </td>
    <td class="d" contenteditable="true">88 </td>
    <td class="davg"> </td>
  </tr>
  <tr>
    <td id = "left">16710177 </td>
    <td id = "left">Teresa Purcell </td>
    <td class="d" contenteditable="true">70 </td>
    <td class="d" contenteditable="true">60 </td>
    <td class="d" contenteditable="true">40 </td>
    <td class="d" contenteditable="true">22 </td>
    <td class="d" contenteditable="true">88 </td>
    <td class="davg"> </td>
  </tr>
  <tr>
    <td id = "left">16710178 </td>
    <td id = "left">James Hennessey </td>
    <td class="d" contenteditable="true">70 </td>
    <td class="d" contenteditable="true">60 </td>
    <td class="d" contenteditable="true">40 </td>
    <td class="d" contenteditable="true">90 </td>
    <td class="d" contenteditable="true">88 </td>
    <td class="davg"> </td>
  </tr>
</table>

<button type="button" onclick="calculate()">
  Submit
</button>

完全正常的示例（由于复制粘贴而删除了一些数据）

Answer 4

试试这个，它有效：

  function calculate() {
var grade1 = Number(document.getElementById('shauna1').innerHTML);
var grade2 = Number(document.getElementById('shauna2').innerHTML);
var grade3 = Number(document.getElementById('shauna3').innerHTML);
var grade4 = Number(document.getElementById('shauna4').innerHTML);
var grade5 = Number(document.getElementById('shauna5').innerHTML);
var average = (grade1+grade2+grade3+grade4+grade5)/5;
document.getElementById("shaunafinal").innerHTML = average;

}

Answer 5

在表格中加入<thead>和<tbody>

<table id="table">
  <thead></thead>
  <tbody></tbody>
</table>

使用

访问表格

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

使用<{p}}访问<th>和<thead>中的<tr> {/ 1}}

<tbody>

外部循环的长度为var ths = table.querySelectorAll("thead th"); var trs = table.querySelectorAll("tbody tr"); <tbody> s，内部循环的长度为<tr> <thead>秒。

总计

<th>

var table = document.getElementById("table"),
  ths_l = table.querySelectorAll("thead th").length,
  trs = table.querySelectorAll("tbody tr"),
  trs_l = trs.length,
  s = 2;

function calculate() {
  for (var i = 0; i < trs_l; i += 1) {
    var res = 0,
      c = 0;
    for (var j = s; j < (ths_l - 1); j += 1) { // Starts with 2
      var textContent = trs[i].children[j].textContent,
        n = textContent.replace(/\D/g, ""); // Delete everything that is not a digit
      if (textContent.match("-")) {
        c += 1;
      }
      res += +n; // String to number, +"" === 0
    }
    trs[i].children[ths_l - 1].textContent = res / (ths_l - 1 - s - c); // Calculate average and insert into <td>
  }
}

从表中计算数据

5 个答案:

总计