HTML数字输入框取值不随用户交互更新，乘法计算结果异常如何解决

问题根因 #

绝大多数情况是取值逻辑执行时机错误：你在页面初始化加载阶段就执行了获取输入框值的代码，此时用户尚未修改输入内容，拿到的是HTML中预设的默认值1；后续用户修改输入框内容后，你没有重新执行取值逻辑，运算时一直使用初始化阶段缓存的旧值。
另一个可能的小问题是：input元素的value属性默认返回字符串类型，虽乘法运算会自动隐式转换，但存在异常值时会得到NaN，建议显式转换为数值类型。

排查&解决步骤 #

• 调整取值逻辑的触发时机，将取值、运算的逻辑绑定到用户交互事件上，比如计算按钮的点击事件、输入框的内容变更事件
  正确可运行的代码示例：
  可以先在HTML中补充计算按钮用于触发运算：

<div>
  Number:<input type="number" id="NumberToMultiply" min="1" max="100" value="1">
  <button id="calculateBtn">计算结果</button>
</div>

对应的JS逻辑：

// 绑定计算按钮点击事件，每次点击时重新取最新值运算
document.getElementById('calculateBtn').addEventListener('click', function() {
  // 显式转换为数值类型，避免字符串运算异常
  const amount = Number(document.getElementById('NumberToMultiply').value);
  const result = amount * 0.1;
  // 此处可替换为将结果渲染到页面的逻辑
  console.log('运算结果：', result);
})

如果需要实时响应用户输入，可以绑定输入框的input事件：

document.getElementById('NumberToMultiply').addEventListener('input', function() {
  const amount = Number(this.value);
  const result = amount * 0.1;
  console.log('实时运算结果：', result);
})

• 排查页面是否存在重复id为NumberToMultiply的元素，DOM选择器匹配错误会导致始终取到第一个匹配元素的默认值
• 若为表单提交场景，确认提交前阻止了表单默认刷新行为，避免页面重置输入框内容导致取值为默认值

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