JavaScript计算器所有运算符统一执行同一种运算Bug排查

• 未存储用户选中的运算符：运算符按钮点击回调中返回add/subtract等函数的写法无实际作用，返回值没有被任何变量接收，选中的运算符根本没有被保存。
• 等号事件逻辑错误：点击等号时遍历了全部运算符按钮，依次匹配action执行计算，最终结果会被最后一个匹配到的运算符逻辑覆盖。你的HTML中最后一个运算符是data-action="add"的加号按钮，因此无论选什么运算符最终都会执行加法；如果把减法判断分支移到最后，所有运算就会统一执行减法。
• 变量声明不规范：num1未提前声明，属于隐式全局变量，运算过程中容易出现值被意外覆盖的问题。
• 缺少乘除运算分支：原有等号逻辑只写了加减判断，就算修复了存储逻辑，乘除功能也无法正常运行。

• 新增全局变量selectedOperator，专门存储用户点击选择的运算符，点击运算符按钮时直接将对应dataset.action赋值给该变量，删除回调中无意义的return语句。
• 重写等号按钮点击逻辑：删除遍历所有运算符按钮的代码，直接判断已存储的selectedOperator值，匹配到对应运算符就执行对应计算，补全乘除运算分支，可额外增加除0错误提示。
• 提前声明所有全局状态变量（num1、selectedOperator），避免隐式全局变量导致的值污染。
• 补全清除按钮逻辑：点击清除时同步清空存储的数字、运算符状态，避免上一次计算结果干扰下一次运算。
• 优化细节：删除按钮点击后如果显示内容为空，自动补0；正负号按钮暂时跳过逻辑，后续可自行扩展功能。

const calcDisplay = document.querySelector('.output');
calcDisplay.textContent = '0'
// 全局状态变量统一声明
let num1 = '';
let num2 = '';
let selectedOperator = '';

const add = (a, b) =>  a + b;
const subtract = (a, b) =>  a - b;
const multiply = (a, b) =>  a * b;
const divide = (a, b) => a / b;

// 运算符按钮事件
document.querySelectorAll('.keyButtonOperation').forEach(operator => {
  operator.addEventListener('click', () => {
    // 跳过正负号功能，可后续自行实现
    if(operator.dataset.action === 'SignChange') return;
    removeClass();
    operator.classList.add('isDepressed');
    selectedOperator = operator.dataset.action;
    num2 = calcDisplay.textContent;
  });
}) 

// 数字按钮事件
document.querySelectorAll('.keyButton').forEach(button => {
  button.addEventListener('click', () => {
    removeClass();
    const inputNum = button.textContent;
    const displayedNum = calcDisplay.textContent;
    if (displayedNum === '0') {
      calcDisplay.textContent = inputNum;
    } else if (displayedNum === num2) {
      calcDisplay.textContent = inputNum
    } else  {
      calcDisplay.textContent = displayedNum + inputNum
    }
  });
});

// 等号按钮事件
const buttonEquals = document.querySelector('.keyButtonEquals');
buttonEquals.addEventListener('click', () => {
  num1 = calcDisplay.textContent;
  let result = 0;
  switch(selectedOperator) {
    case 'add':
      result = parseInt(num1) + parseInt(num2);
      break;
    case 'subtract':
      result = parseInt(num1) - parseInt(num2);
      break;
    case 'multiply':
      result = parseInt(num1) * parseInt(num2);
      break;
    case 'divide':
      if(parseInt(num2) === 0) {
        calcDisplay.textContent = 'Error';
        selectedOperator = '';
        return;
      }
      result = parseInt(num1) / parseInt(num2);
      break;
    default:
      return;
  }
  calcDisplay.textContent = result;
  selectedOperator = '';
});

// 清除按钮事件
const buttonClear = document.querySelector('.keyButtonClear');
buttonClear.addEventListener('click', () => {
  calcDisplay.textContent = '0'
  num1 = '';
  num2 = '';
  selectedOperator = '';
  removeClass();
});

// 删除按钮功能
function deleteInput() {
  const deleteButton = document.querySelector('.keyButtonDelete')
  deleteButton.addEventListener('click', () => {
    calcDisplay.textContent = calcDisplay.textContent.slice(0, -1);
    if(calcDisplay.textContent === '') calcDisplay.textContent = '0';
  });
}
deleteInput()

// 移除运算符选中样式
function removeClass () {
  document.querySelectorAll('.keyButtonOperation').forEach(button => {
    button.classList.remove('isDepressed')
  });
}

原有HTML结构不需要修改，直接替换JS代码即可解决所有运算符执行同一种逻辑的问题。

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