JS成绩计算器表单未完整填写时返回NaN问题求助

问题根源 #

你的代码出现NaN的原因主要有三点：

• 当某行的**满分(C)**为0时，得分(B)/满分(C)会产生无穷大或NaN
• 当某行的B/C/D未填写或不是有效数字时，parseFloat会返回NaN，后续所有包含该值的计算都会变成NaN
• 如果所有行的权重都是0，最后计算总分时除以0也会导致NaN

修复方案 #

我们需要对每一行的数据进行有效性校验，只计算填写完整且合法的行，同时避免除以0的情况。另外，重构代码用循环处理所有行，减少重复代码，更易维护。

修改后的代码 #

JavaScript部分

function calcGrade() {
  let totalWeightedScore = 0;
  let totalWeight = 0;
  const rowCount = 8; // 总共有8行成绩

  for (let i = 1; i <= rowCount; i++) {
    // 获取当前行的三个值
    const earned = parseFloat(document.getElementById(`b${i}`).value);
    const max = parseFloat(document.getElementById(`c${i}`).value);
    const weight = parseFloat(document.getElementById(`d${i}`).value);

    // 校验：必须都是有效数字，且max不能为0
    if (!isNaN(earned) && !isNaN(max) && !isNaN(weight) && max > 0) {
      const percentage = earned / max;
      totalWeightedScore += percentage * weight;
      totalWeight += weight;
    }
  }

  // 处理权重总和超过100的情况
  if (totalWeight > 100) {
    alert("错误：权重总和超过100，请确保权重总和≤100！");
    return;
  }

  // 处理没有有效行的情况
  if (totalWeight === 0) {
    document.getElementById("weight").innerHTML = 0;
    document.getElementById("classGrade").innerHTML = "无有效成绩数据";
    return;
  }

  // 计算最终成绩并保留两位小数
  const classGrade = totalWeightedScore / totalWeight;
  document.getElementById("weight").innerHTML = totalWeight;
  document.getElementById("classGrade").innerHTML = classGrade.toFixed(2);
}

HTML部分（优化输出结构，修正拼写错误）

<form name="classGradeCalc" action>
  <table>
    <tbody>
      <tr>
        <td>评分类别</td>
        <td>得分</td>
        <td>满分</td>
        <td>权重</td>
      </tr>
      <tr>
        <td><input type="text" size="20" id="a1" value=""></td>
        <td><input type="number" size="5" id="b1" value="0"></td>
        <td><input type="number" size="5" id="c1" value="0"></td>
        <td><input type="number" size="5" id="d1" value="0"></td>
      </tr>
      <tr>
        <td><input type="text" size="20" id="a2" value=""></td>
        <td><input type="number" size="5" id="b2" value="0"></td>
        <td><input type="number" size="5" id="c2" value="0"></td>
        <td><input type="number" size="5" id="d2" value="0"></td>
      </tr>
      <tr>
        <td><input type="text" size="20" id="a3" value=""></td>
        <td><input type="number" size="5" id="b3" value="0"></td>
        <td><input type="number" size="5" id="c3" value="0"></td>
        <td><input type="number" size="5" id="d3" value="0"></td>
      </tr>
      <tr>
        <td><input type="text" size="20" id="a4" value=""></td>
        <td><input type="number" size="5" id="b4" value="0"></td>
        <td><input type="number" size="5" id="c4" value="0"></td>
        <td><input type="number" size="5" id="d4" value="0"></td>
      </tr>
      <tr>
        <td><input type="text" size="20" id="a5" value=""></td>
        <td><input type="number" size="5" id="b5" value="0"></td>
        <td><input type="number" size="5" id="c5" value="0"></td>
        <td><input type="number" size="5" id="d5" value="0"></td>
      </tr>
      <tr>
        <td><input type="text" size="20" id="a6" value=""></td>
        <td><input type="number" size="5" id="b6" value="0"></td>
        <td><input type="number" size="5" id="c6" value="0"></td>
        <td><input type="number" size="5" id="d6" value="0"></td>
      </tr>
      <tr>
        <td><input type="text" size="20" id="a7" value=""></td>
        <td><input type="number" size="5" id="b7" value="0"></td>
        <td><input type="number" size="5" id="c7" value="0"></td>
        <td><input type="number" size="5" id="d7" value="0"></td>
      </tr>
      <tr>
        <td><input type="text" size="20" id="a8" value=""></td>
        <td><input type="number" size="5" id="b8" value="0"></td>
        <td><input type="number" size="5" id="c8" value="0"></td>
        <td><input type="number" size="5" id="d8" value="0"></td>
      </tr>
      <tr>
        <td><input type="button" value="计算成绩" onclick="calcGrade()"></td>
      </tr>
    </tbody>
  </table>
  <table>
    <tbody>
      <tr>
        <td>已用权重总和:</td>
        <td><span id="weight">0</span></td>
      </tr>
      <tr>
        <td>课程成绩:</td>
        <td><span id="classGrade">0</span></td>
      </tr>
    </tbody>
  </table>
</form>

关键改进点 #

• 循环处理行：用for循环遍历所有8行，避免重复写8次相同的代码
• 有效性校验：通过isNaN()检查每个值是否有效，同时确保满分不为0
• 避免除以0：当没有有效行时，给出友好提示而不是NaN
• 友好输出：用toFixed(2)保留两位小数，让成绩显示更直观
• 优化体验：将英文提示改为中文，修正原HTML中的拼写错误

内容的提问来源于stack exchange，提问作者Don'tFront