在计算每个总字段的总和后，自动获取每个主题的成绩值

Question

在计算总和后，我希望自动显示成绩而不点击任何按钮。

function myFunction() {
  var num = document.getElementsByClassName("total").value;
  switch (true) {
    case (num >= 91 && num <= 100):
      document.getElementsByClassName("demo").innerHTML = "A+";;
      break;
    case (num >= 81 && num <= 90):
      document.getElementsByClassName("demo").innerHTML = "A";
      break;
    case (num >= 71 && num <= 80):
      document.getElementsByClassName("demo").innerHTML = "B+";
      break;
    case (num >= 61 && num <= 70):
      document.getElementsByClassName("demo").innerHTML = "B";
      break;
    case (num >= 51 && num <= 60):
      document.getElementsByClassName("demo").innerHTML = "C";
      break;
    case (num >= 41 && num <= 50):
      document.getElementsByClassName("demo").innerHTML = "D";
      break;
    case (num >= 31 && num <= 40):
      document.getElementsByClassName("demo").innerHTML = "E";
      break;
    case (num >= 0 && num <= 30):
      document.getElementsByClassName("demo").innerHTML = "F";
      break;
    default:
      document.getElementsByClassName("demo").innerHTML = "No grade yet";
      break;
  };
};

<table>
  <tr class="row1">
    <th>Class Name</th>
    <th>1st</th>
    <th>2nd</th>
    <th>3rd</th>
    <th>Total</th>
    <th>Grade</th>
  </tr>
  <tr class="row">
    <td>Class 1:</td>
    <td>
      <input type="number" name="1" id="1" class='first'>
    </td>
    <td>
      <input type="number" name="2" id="2" class='second'>
    </td>
    <td>
      <input type="number" name="3" id="3" class='third'>
    </td>
    <td>
      <input type="text" name="4" id="4" class='total' readonly>
    </td>
    <td>
      <input type="text" class='demo' readonly>
    </td>
  </tr>

  <tr class="row">
    <td>Class 2:</td>
    <td>
      <input type="number" name="1" id="1" class='first'>
    </td>
    <td>
      <input type="number" name="2" id="2" class='second'>
    </td>
    <td>
      <input type="number" name="3" id="3" class='third'>
    </td>
    <td>
      <input type="text" name="4" id="4" class='total' readonly>
    </td>
    <td>
      <input type="text" class='demo' readonly>
    </td>
  </tr>
</table>

Answer 1

getElementsByClassName返回您需要迭代或索引的HTMLCollection。此外，通过使用函数和变量使代码更具可读性，可以大大改善代码。

＆＃13;

＆＃13;

var rows = document.getElementsByClassName('row');
[].forEach.call(rows, function(row) {
  row.addEventListener('keyup', function(e) {
    var demo = row.getElementsByClassName('demo')[0];
    var total = row.getElementsByClassName('total')[0];
    var entries = row.getElementsByClassName('entry');
    
    var score = [].reduce.call(entries, function(sum, entry) {
      return +entry.value + sum;
    }, 0);
    
    total.value = score || 0;
    demo.value = getGrade(score);
  });
});

function getGrade(score) {
       if (score > 90) { return 'A+'; }
  else if (score > 80) { return 'A'; }
  else if (score > 70) { return 'B+'; }
  else if (score > 60) { return 'B'; }
  else if (score > 50) { return 'C'; }
  else if (score > 40) { return 'D'; }
  else if (score > 30) { return 'E'; }
  else if (score >= 0) { return 'F'; }
  else { return 'No grade yet'; }
}

＆＃13;

<table>
  <tr>
    <th>Class Name</th>
    <th>1st</th>
    <th>2nd</th>
    <th>3rd</th>
    <th>Total</th>
    <th>Grade</th>
  </tr>
  <tr class="row">
    <td>Class 1:</td>
    <td><input type="number" class="entry"></td>
    <td><input type="number" class="entry"></td>
    <td><input type="number" class="entry"></td>
    <td><input type="text" class="total" readonly></td>
    <td><input type="text" class="demo" readonly></td>
  </tr>
  <tr class="row">
    <td>Class 2:</td>
    <td><input type="number" class="entry"></td>
    <td><input type="number" class="entry"></td>
    <td><input type="number" class="entry"></td>
    <td><input type="text" class="total" readonly></td>
    <td><input type="text" class="demo" readonly></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;