JS计算器数字按钮addEventListener仅触发一次仅存1个值问题

问题根因 #

你的代码逻辑判断存在两处核心问题，导致只能录入单次数字：

1. 首次点击数字后number1被赋值为数组，typeof number1就不再是undefined，第二次点击数字会进入第二个分支直接把number2赋值为单个字符串，第三次点击数字时number1和number2都已被赋值，两个分支都进不去，自然不会有响应
2. 你最初设计用数组存多位数的逻辑没有落地：number1只做了一次push，number2甚至直接存了单个值，计算时数组转数字也会得到NaN，无法实现多位数拼接

修复后的完整代码 #

JS部分 #

// 初始化变量，直接用数组存数字字符，用operator是否存在判断当前输入阶段
let number1 = [];
let number2 = [];
let operator;
const display = document.getElementById('display');
const resetBtn = document.getElementById('reset');

const getValues = () => {
  const numValue = document.querySelectorAll('.number');
  numValue.forEach(number => {
    number.addEventListener('click', () => {
      // 没有选运算符的时候，录入的是第一个数
      if (typeof operator === 'undefined') {
        number1.push(number.value)
        display.innerHTML += number.value;
        console.log(number1.join(''));
      } else {
        // 选了运算符之后，录入的是第二个数
        number2.push(number.value)
        display.innerHTML += number.value;
        console.log(number2.join(''))
      }
    })
  });

  const getOperators = () => {
    const operatorValue = document.querySelectorAll('.operator');
    operatorValue.forEach(operatorBtn => {
      operatorBtn.addEventListener('click', () => {
        if (typeof operator === 'undefined' && number1.length) {
          operator = operatorBtn.value;
          display.innerHTML += ` <b>${operatorBtn.value}</b> `;
          console.log(operator);
        }
      })
    })
  }
  getOperators();

  const calculation = () => {
    const equal = document.querySelector('.equal')
    equal.addEventListener('click', () => {
      if (number1.length && number2.length && operator) {
        // 数组拼接成字符串再转数字
        const num1 = +number1.join('');
        const num2 = +number2.join('');
        let result;
        switch(operator) {
          case '+': 
            result = num1 + num2;
            break;
          case '-':
            result = num1 - num2;
            break;
          case 'x':
            result = num1 * num2;
            break;
          case '/':
            result = num1 / num2;
            break;
        }
        display.innerHTML += ` = ${result} `;
        console.log(result);
      }
    })
  }
  calculation();

  // 新增重置逻辑
  resetBtn.addEventListener('click', () => {
    number1 = [];
    number2 = [];
    operator = undefined;
    display.innerHTML = '';
  })
}

getValues();

HTML部分无需修改，已经符合需求 #

额外优化点 #

• 新增了重置按钮的逻辑，计算完成后点击重置可以重新录入
• 运算符点击判断增加了number1.length的校验，避免还没输数字就先点运算符的异常情况
• 把原来的多分支if改成了switch，逻辑更清晰
• 去掉了display里多余的空格，显示更贴合常规计算器样式

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