JavaScript如何实现点击按钮持续更新INPUT输入后已赋值的变量值

核心问题说明 #

• 原代码每次点击都会重新读取input输入框的原始值计算，没有复用之前的累加结果
• 给同一个按钮重复绑定点击事件监听器会导致逻辑冲突，且adderContinue中的页面更新逻辑不在事件回调内，点击时不会触发视图更新
• 你提到的两种思路都不是最优方案，无需切换事件监听器也无需用数组存储值，用1个标记变量区分首次/后续点击即可实现需求

修正后完整代码 #

HTML代码 #

<input id="yourNumber" type="number" />
<button id="btn">Calculate</button>
<p id="output"></p>

JS代码 #

let sum = 0;
// 标记是否是第一次点击
let isFirstClick = true;

function adder5() {
  if (isFirstClick) {
    // 首次点击读取输入框的值
    const userNumber = Number(document.querySelector("#yourNumber").value);
    sum = userNumber + 5;
    // 首次计算完成后修改标记
    isFirstClick = false;
  } else {
    // 后续点击直接累加5，不再读取输入框
    sum = sum + 5;
  }
  document.querySelector("#output").textContent = sum;
}

document.querySelector("#btn").addEventListener("click", adder5);

逻辑说明 #

• 首次点击按钮时读取输入框的数值，加5后输出，同时修改点击标记
• 后续点击按钮不再读取输入框内容，直接在上一次计算结果的基础上加5输出
• 如果需要修改初始值重新计算，可以额外加重置按钮，把isFirstClick重置为true即可

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