JavaScript如何实现变量实时同步输入框的最新输入值

问题根因 #

你代码中的numberValue变量仅在脚本初始化时读取了一次输入框的值，后续用户手动修改输入框内容时，该变量不会自动同步最新值，导致运算逻辑始终基于首次读取的旧值执行。另外你的HTML代码中输入框同时写了两个id属性，属于无效写法，且input标签不支持onload属性，该配置不会生效。

修复方案1：函数执行时主动读取最新值（改动最小） #

直接删掉全局的numberValue变量，每次触发运算时先从输入框实时读取最新值并转为数字类型即可，修改后代码如下：

var number = document.getElementById("number");

function plus() {
  let numberValue = Number(number.value);
  number.value = ++numberValue;
}

function minus() {
  let numberValue = Number(number.value);
  number.value = --numberValue;
}

function flip() {
  let numberValue = Number(number.value);
  var temp = numberValue;
  var cifra, prevrten = 0;
  while (temp > 0) {
    cifra = temp % 10;
    prevrten = (prevrten * 10) + cifra;
    temp = temp / 10 | 0;
  }
  number.value = prevrten;
}
window.onload = function() {
  number.value = "";
}

对应HTML优化写法：

<div>
  <input type="number" id="number">
  <input type="button" value="<" onclick="minus();">
  <input type="button" value=">" onclick="plus();">
  <input type="button" value="FLIP" onclick="flip();">
  <input type="button" value="STORE" onclick="store();">
  <input type="button" value="CHECK" onclick="check();">
</div>

修复方案2：监听输入框变化自动更新变量 #

如果需要保留全局numberValue变量，可以给输入框绑定input事件，只要输入框内容变化就自动更新变量值：

var number = document.getElementById("number");
var numberValue = number.value;
// 新增输入事件监听，值变化自动同步
number.addEventListener('input', function() {
  numberValue = Number(this.value);
})

console.log(numberValue);

function plus() {
  number.value = ++numberValue;
}

function minus() {
  number.value = --numberValue;
}

function flip() {
  var temp = numberValue;
  var cifra, prevrten = 0;
  while (temp > 0) {
    cifra = temp % 10;
    prevrten = (prevrten * 10) + cifra;
    temp = temp / 10 | 0;
  }
  number.value = prevrten;
}
window.onload = function() {
  number.value = "";
}

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