JavaScript数字根计算器异常：弹窗随机数后显示NaN并页面崩溃

问题根源 #

• 无限循环导致页面崩溃：你的for循环条件写错了——sumstr.length是固定的非零值（只要计算出的sum不为空），会一直返回true，循环永远停不下来。当i超过字符串长度后，sumstr[i]等于undefined，转成数字就是NaN，加到total后整个值就变成NaN，这就是你看到NaN提示的原因，无限循环还会直接卡死页面。
• 表单默认提交行为干扰：按钮是type="submit"，点击后会触发表单提交，页面会自动刷新，这会打乱弹窗顺序，甚至导致页面异常。

修复后的代码 #

JavaScript 部分

function digroot(e) {
  // 阻止表单默认提交，避免页面刷新
  e.preventDefault();

  // 获取输入框值
  var num1 = document.getElementById("root").value
  var num2 = document.getElementById("root2").value
  var num3 = document.getElementById("root3").value
  var num4 = document.getElementById("root4").value
  var num5 = document.getElementById("root5").value

  // 计算初始总和，空输入自动转为0
  var sum = (Number(num1) || 0) + (Number(num2) || 0) + (Number(num3) || 0) + (Number(num4) || 0) + (Number(num5) || 0);

  var sumstr = sum.toString();
  var total = 0;

  // 修正循环条件：遍历每一位数字
  for (let i = 0; i < sumstr.length; i++) {
    total += Number(sumstr[i]);
  }

  // 数字根需要反复求和直到结果为个位数，补充完整逻辑
  while (total >= 10) {
    total = total.toString().split('').reduce((acc, digit) => acc + Number(digit), 0);
  }

  alert("数字根结果：" + total);
}

document.getElementById("rootchecker").addEventListener('click', digroot);

HTML 部分（可直接复用）

<form>
  <input type="text" name="root" id="root">
  <input type="text" name="root2" id="root2">
  <input type="text" name="root3" id="root3">
  <input type="text" name="root4" id="root4">
  <input type="text" name="root5" id="root5">
  <br><br>
  <button type="submit" name="rootchecker" id="rootchecker">Check digital root</button>
</form>
<br>

额外说明 #

原来的代码只做了一次各位数字求和，但数字根的定义是反复将各位数字相加，直到得到一个个位数，所以补充了while循环来完成完整逻辑。如果你的需求只是第一次求和，可以去掉这段循环。

内容的提问来源于stack exchange，提问作者ramuramu