连续加法计算器（JS+HTML）嵌入HTML后无法运行问题求助

核心问题分析 #

• 递归死循环：核心运算函数cn内部最后一行重复调用自身，且无终止条件，点击按钮后会触发无限递归，直接导致页面卡死无响应。
• 未执行核心逻辑：仅定义了运算函数但从未调用，即便没有死循环，也不会产生任何运算输出。
• 覆盖原生API：自定义的console.log替换了浏览器原生方法，既不利于调试，也不符合代码规范。
• 变量冗余赋值：var cn_a = 0; var cn_a = mo_m;重复赋值，属于无效代码。
• 输入无校验：未处理输入为空、非数字的情况，parseInt可能返回NaN，引发计算异常。

修复后的代码 #

JavaScript代码 #

document.getElementById('cn').onclick = function() {
  // 获取输入值并转换为整数
  const mo_m = parseInt(document.getElementById('mo_m').value);
  const mo_s = parseInt(document.getElementById('mo_s').value);

  // 输入合法性校验
  if (isNaN(mo_m) || isNaN(mo_s) || mo_s < 0) {
    document.getElementById("log").innerHTML = "请输入合法的非负整数！";
    return;
  }

  // 自定义页面输出函数，不覆盖原生console.log
  function logToPage(...e) {
    const logEl = document.getElementById("log");
    for (let i = 0; i < e.length; i++) {
      logEl.innerHTML += (typeof(e[i]) === "object" ? JSON.stringify(e[i]) : e[i]) + "<br />";
    }
  }

  // 初始化运算变量
  let tim_in = 1;
  let tim_on = 0;
  let cn_a = mo_m;

  // 输出初始值
  logToPage(`第零刻 第零次 第一番：<br>${mo_m}`);

  // 核心运算逻辑，移除递归死循环
  function calculate(multiplicand, times) {
    while (tim_in <= times) {
      tim_in++;
      tim_on++;
      const cn_f = cn_a;
      cn_a = cn_a + multiplicand;
      logToPage(`第${tim_on}次（第${tim_in}番)<br>${cn_f} + ${multiplicand} = ${cn_a}<br><br>`);
    }
  }

  // 触发运算
  calculate(mo_m, mo_s);
}

HTML代码 #

<html>
<head>
  <title>方程部落：乘法</title>
</head>
<body>
  <h1>出題</h1>
  <br>
  被加数（连续相加的数）：<input type="number" id='mo_m' min="0">
  <br>
  相加次数：<input type="number" id='mo_s' min="0">
  <br>

  <h1>運算過程</h1>
  <hr>
  <button id='cn'>开始连续加法运算</button>
  <br>
  <p id="log"></p>
  <div id="demo"></div>
  <br>
  <hr>
</body>
</html>

关键修改说明 #

1. 移除递归死循环：删除运算函数内的自调用逻辑，改为单次执行循环运算。
2. 新增输入校验：判断输入是否为合法非负整数，避免无效输入导致的异常。
3. 自定义输出函数：用logToPage替代对原生console.log的覆盖，保留原生调试能力。
4. 主动触发运算：在按钮点击事件中调用核心运算函数，确保逻辑执行。
5. 优化变量声明：使用let替代var，避免变量提升问题，移除冗余赋值。
6. 优化用户体验：给输入框添加min属性限制，修改提示文本，让交互更清晰。

内容的提问来源于stack exchange，提问作者張亦成