JavaScript无法获取输入框值？点击按钮不显示延迟计算结果

• 给结果元素写innerHTML时误用了转义后的HTML实体，代码里的<h1>、</h1>是转义字符，浏览器不会把它解析为标题标签，只会把整段字符串当普通文本展示。
• 从输入框获取的value是字符串类型，没有做显式数字转换。虽然JS在乘法运算时会隐式将字符串转为数字，但如果用户清空输入框，空字符串参与运算会得到NaN，最终输出会异常。
• 若predict函数没有暴露到全局作用域，按钮的内联onclick事件会找不到对应函数，点击时直接抛出引用错误，页面自然不会有任何输出，这也是最容易导致无输出的常见场景。

JavaScript 部分 #

function predict() {
  // 显式转换输入值为数字，规避空值/字符串类型带来的计算异常
  const var1 = Number(document.getElementById("var1").value);
  const var2 = Number(document.getElementById("var2").value);
  const var3 = Number(document.getElementById("var3").value);
  const var4 = Number(document.getElementById("var4").value);

  const coef1 = 1, coef2 = 2, coef3 = 3, coef4 = 4;
  const delay = coef1 * var1 + coef2 * var2 + coef3 * var3 + coef4 * var4;

  // 直接写入原生HTML标签，不使用转义实体
  document.getElementById("delay").innerHTML = `<h1>Delay is about ${delay} mins</h1>`;
}

HTML 部分 #

<div id="delay"></div>

<div class="input-box">
  <input type="number" value="1" id="var1">
  <input type="number" value="2" id="var2">
  <input type="number" value="3" id="var3">
  <input type="number" value="4" id="var4">
  <button onclick="predict()">Predict Delay</button>
</div>

• 如果JS代码是写在带type="module"的脚本标签里，需要手动把predict挂载到全局对象上，否则内联事件无法找到这个函数，写法为：window.predict = predict;
• 用模板字符串拼接计算结果，比直接用加号拼接字符串可读性更好，也不容易出现引号嵌套的语法错误。

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