JS计算器无法计算多位数加法 仅支持个位数正常运算

问题现象 #

开发的计算器输入个位数计算时运行正常，输入两位数及以上多位数时计算错误，程序只会读取第二个运算数的最后一位：

• 计算50 + 55时，第二个输入的55仅被识别为5，最终输出错误结果55
• 输入三位数及更长的第二个运算数时，同样仅识别最后一位，无法得到正确结果

附现有代码 #

JavaScript 逻辑代码 #

const calcDisplay = document.querySelector('.output');
calcDisplay.textContent = '0'

let num2 = ''

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

// 运算符按钮绑定事件
const buttonOperation = document.querySelectorAll('.keyButtonOperation').forEach(operator => {
operator.addEventListener('click', () => {
operator.classList.add('isDepressed')

  switch(operator) {
    case(operator.dataset.action === 'add'):
      return add(a, b)
     
    case(operator.dataset.action  === 'substract'):
      return subtract(a, b)

    case(operator.dataset.action  === 'multiply'):
      return multiply(a, b)

    case(operator.dataset.action  === 'divide'):
      return divide(a, b)
      
  }  

 num2 = calcDisplay.textContent
}) 
});

// 数字按钮绑定显示屏更新事件
const buttons = document.querySelectorAll('.keyButton').forEach(button => {
button.addEventListener('click', () => {
removeClass();
num1 = button.textContent;
displayedNum = calcDisplay.textContent;

  if (displayedNum === '0') {
    calcDisplay.textContent = num1;
} else if (displayedNum === num2) {
    calcDisplay.textContent = num1
} else  {
    calcDisplay.textContent = displayedNum + num1
}

});

});


const buttonEquals = document.querySelector('.keyButtonEquals');
buttonEquals.addEventListener('click', () => {
document.querySelectorAll('.keyButtonOperation').forEach(operator => {
if(operator.dataset.action === 'add') {
  calcDisplay.textContent = parseInt(num1) + parseInt(num2)
 }
});
});

// 清空按钮逻辑
const buttonClear = document.querySelector('.keyButtonClear');
buttonClear.addEventListener('click', () => {
calcDisplay.textContent = '0'
// 后续逻辑待补充
});

// 删除单字符按钮逻辑
function deleteInput() {
const deleteButton = document.querySelector('.keyButtonDelete')
deleteButton.addEventListener('click', () => {
  calcDisplay.textContent = calcDisplay.textContent.slice(0, -1);
});
}
deleteInput()

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

HTML 结构代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
  <div class="calcContainer">
    <div class="buttons">
      <div class="output"></div>
      <button class="keyButton">7</button>
      <button class="keyButton">8</button>
      <button class="keyButton">9</button>
      <button class="keyButtonOperation" data-action = "SignChange" >+/-</button>
      <button class="keyButtonDelete">DEL</button>

      <button class="keyButton">4</button>
      <button class="keyButton">5</button>
      <button class="keyButton">6</button>
      <button class="keyButtonOperation" data-action="multiply">X</button>
      <button class="keyButtonOperation" data-action="divide">%</button>

      <button class="keyButton">1</button>
      <button class="keyButton">2</button>
      <button class="keyButton">3</button>
      <button class="keyButtonOperation" data-action = "substract">-</button>
      <button class="keyButtonEquals">=</button>

      <button class="keyButtonClear">C</button>
      <button class="keyButton">0</button>
      <button class="keyButton">.</button>
      <button class="keyButtonOperation" data-action = "add">+</button>
    </div>
  </div>
  <script src="./scripts/script.js"></script>
</body>
</html>

问题原因 #

核心问题是变量赋值和状态管理逻辑写错了：

• 没有提前声明存储第一个运算数、当前选中运算符的变量，每次点击数字按钮都会直接把num1覆盖为当前点击的单个数字，不管之前已经输入了多少位。比如输入55时，点第一个5把num1设为"5"，点第二个5直接把num1覆盖成"5"，之前输入的十位数字直接丢失
• 运算符按钮里的switch语法写法错误，把判断条件写在了case位置，逻辑根本不会按预期执行，num2的赋值位置也不对，点击运算符时没有正确把已经输入的第一个数存下来
• 等号按钮的逻辑只处理了加法场景，减法、乘法、除法完全没有对应实现

修复方向 #

• 开头提前声明三个状态变量：firstNum = ''、secondNum = ''、selectedOperator = null，分别存第一个运算数、第二个运算数、当前选中的运算符
• 调整数字按钮点击逻辑：如果当前没选运算符，就把点击的数字拼接到firstNum后面同步更新显示；如果已经选了运算符，就把数字拼接到secondNum后面同步更新显示，不要每次点击数字就直接覆盖存储运算数的变量
• 修正运算符按钮逻辑：点击运算符时，先把当前显示屏的内容存为firstNum，再把当前运算符记录到selectedOperator，删掉写法错误的switch块
• 调整等号按钮逻辑：根据selectedOperator的值选择对应的计算函数，传入完整的firstNum和secondNum做计算，把结果显示到屏幕后重置状态变量，方便下一次计算
• 清空按钮逻辑补充：除了把显示屏重置为0，也要把三个状态变量重置为初始值

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