点击数值减1按钮后输入框未同步更新内容该如何修复？

问题原因 #

• 变量覆盖错误：你一开始将number变量赋值为输入框DOM对象，紧接着通过number = number.value把变量覆盖为输入框的初始值（基本类型），后续调用number.value属于无效操作，无法关联到输入框元素。
• 输入框更新规则错误：input为表单控件，更新展示内容需要修改value属性，innerHTML只适用于普通闭合标签的内容修改，对输入框无效。
• HTML语法错误：输入框标签同时定义了id="number"和id="output"两个id属性，属于无效写法，浏览器只会识别第一个。

修复后代码 #

JavaScript代码

// 持久存储输入框DOM对象，不要覆盖为值
const numberInput = document.getElementById("number");

function minus() {
  // 读取当前输入值，转数字后做运算，为空默认取0避免NaN
  let currentVal = Number(numberInput.value) || 0;
  currentVal -= 1;
  // 将计算后的值回写到输入框的value属性，触发页面同步更新
  numberInput.value = currentVal;
  console.log(currentVal);
}

HTML修改（仅调整输入框的重复id问题）

<input type="text" id="number">

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