JavaScript实现delta计算功能时delta值始终为0的问题咨询

• 当前代码中a = first.value、b = second.value、c = third.value 这几行赋值逻辑，是在JS脚本刚加载、页面刚完成初始渲染时就执行的。这个时间点用户完全还没开始往输入框里输内容，三个输入框的value都是空字符串，你直接把这三个空字符串存到了外层全局变量里。
• 后续点击按钮执行计算时，用的还是最开始存的那组空字符串值。空字符串参与乘法运算时，JS会自动将其隐式转换为数字0，所以无论你之后在输入框里输入了什么内容，最终计算出来的delta值永远是0。
• 之前测试给delta设置固定整数静态值时结果能正常显示，刚好验证了你的DOM元素绑定、按钮事件监听、结果DOM渲染的整套逻辑都是正常可用的，不存在元素绑定失效的问题。

调整后逻辑如下：

• 将读取输入框值的逻辑移动到点击事件的处理函数内部，等用户点击计算按钮的瞬间，再读取输入框的实时输入内容
• 读取到输入框的字符串内容后，显式转换为数字类型，避免隐式类型转换带来的计算误差
• 补充简单的输入校验，避免用户输入非数字内容时出现无意义的计算结果

修正后的参考JS代码：

var first = document.getElementById("Cofession1"),
second = document.getElementById("Cofession2"),
third = document.getElementById("Cofession3"),
displayMessage = document.getElementById("solution"),
btnClick = document.getElementById("calculateButton");

btnClick.onclick = function () {
  // 点击触发时才读取实时输入值，显式做数字类型转换
  var a = Number(first.value);
  var b = Number(second.value);
  var c = Number(third.value);

  // 输入合法性校验
  if (isNaN(b)) {
    displayMessage.innerHTML = "请输入有效的数字作为b值";
    return;
  }

  var delta = b * 5;
  displayMessage.innerHTML = "delta = " + delta;
}

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