JS计算器输入第二个数字时结果异常、firstInput重复如何解决

核心问题说明 #

• 嵌套绑定事件：你在数字按钮的第一层点击回调内部，又给所有数字按钮重复绑定了一次点击事件，每点击一次数字就会新增一批事件监听，后续点击数字会同时触发多个回调，导致变量重复累加，出现冗余内容
• storedInput赋值逻辑错误：每次更新firstInput时直接将整个firstInput追加到storedInput中，比如输入1时storedInput为1，再输入2时firstInput变为12，storedInput就变成1+12=112，就是你显示异常开头的冗余内容来源
• 运算符赋值逻辑错误：currentOp使用+=累加，多次点击运算符会拼接多个运算符，不符合计算器预期逻辑

修复后代码 #

let firstInput = '';
let secondInput = '';
let currentOp = '';
// 标记是否已经完成第一个数输入、选中运算符
let isOpSelected = false;
const results_div = document.querySelector('.screen')
const numberBtns = document.querySelectorAll('.numbers')
const operatorBtns = document.querySelectorAll('.operator');
const clearBtn = document.querySelector('.c');

// 仅统一绑定一次数字按钮点击事件，禁止嵌套绑定
numberBtns.forEach((numbers) => {
  numbers.addEventListener('click', () => {
    const inputValue = numbers.value;
    if (!isOpSelected) {
      // 未选中运算符时，输入内容归属第一个数
      firstInput += inputValue;
      results_div.innerHTML = firstInput;
    } else {
      // 已选中运算符时，输入内容归属第二个数
      secondInput += inputValue;
      results_div.innerHTML = firstInput + currentOp + secondInput;
    }
  })
})

operatorBtns.forEach((operators) => {
  operators.addEventListener('click', () => {
    // 运算符直接赋值，避免多次点击拼接多个运算符
    currentOp = operators.value;
    isOpSelected = true;
    results_div.innerHTML = firstInput + currentOp;
  })
})

// 补充清除按钮逻辑
clearBtn.addEventListener('click', () => {
  firstInput = '';
  secondInput = '';
  currentOp = '';
  isOpSelected = false;
  results_div.innerHTML = '';
})

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