如何修复JavaScript计算器的链式计算功能异常问题？

输入如3+3+3这类连续运算时，结果显示为6，无法基于前一次计算结果进行后续运算。单次点击“=”按钮运算正常，但点击运算符进行链式计算时无法实现预期效果。

尝试过的修复代码 #

switch (e.target.textContent){
  //What I tried to fix the result
  case '+':
    if(n1!== null && n2===null){
      n2 = display.textContent;
      result = operate(n1, operator, n2);
      displayVal = result;
      display.textContent = displayVal;
      n1 = result;
    }
    operator = 0;
    displayVal = '0';
    display.textContent = 0;
    break;
    // ... other operators

完整代码 #

JavaScript #

let displayVal = '0';
const display = document.querySelector('#display');
const numberButtons = document.querySelectorAll('.number');
const symbols = document.querySelectorAll('.symbol')
const equal = document.querySelector('#equal');
let equalPressed;
let result;

function add(n1, n2) {
    const sum = n1 + n2;
    displayVal = sum;
  display.textContent = sum;
  return sum;
}

function subtract(n1, n2) {
    displayVal = n1 - n2;
  display.textContent = displayVal;
  return n1-n2;
}

function multiply(n1, n2) {
    const product = n1 * n2;
  displayVal = product;
  display.textContent = displayVal;
  return n1*n2;
}

function divide(n1, n2){
  displayVal = n1
  display.textContent = n1/n2;
  return n1/n2;
}


numberButtons.forEach(btn => {

  btn.addEventListener('click', function(e){
    if (displayVal === 0 || displayVal === '0'){
      equalPressed = false;
      displayVal = e.target.textContent;
      display.textContent = displayVal;
    }
    else if(equalPressed === true){
      equalPressed = false;
      displayVal = e.target.textContent;
      display.textContent = displayVal;
    }
    else if(equalPressed === false){
      displayVal+=e.target.textContent;
      display.textContent = displayVal;
    }
    else{
      return;
    }
  })
})


let n1 = 0;
let operator = -1;
let n2 = 0;

symbols.forEach(symbol => {
  operator = 0;
  symbol.addEventListener('click', function(e){
    n1 = Number.parseInt(displayVal);
    switch (e.target.textContent){
      case '+':
        if(n1!== null && n2===null){
          n2 = display.textContent;
          result = operate(n1, operator, n2);
          displayVal = result;
          display.textContent = displayVal;
          n1 = result;
        }
        operator = 0;
        displayVal = '0';
        display.textContent = 0;
        break;
      case '-':
        operator = 1;
        displayVal = '0';
        display.textContent = 0;
        break;
      case '×':
        operator = 2;
        displayVal = '0';
        display.textContent = 0;
        break;
      case '÷':
        operator = 3;
        displayVal = '0';
        display.textContent = 0;
        break;
      case 'C':
        displayVal = '0';
        display.textContent = '0';
        n1 = 0;
        n2 = 0;
        break;
    }
  })
})

equal.addEventListener('click', function(){
  if (equalPressed === true){
    return;
  }
  n2 = Number.parseInt(displayVal);
  equalPressed = true;
  operate(n1, operator, n2);
})

function operate(n1, operator, n2){
  if (operator===0){
    add(n1, n2);
  }
  else if (operator === 1){
    subtract(n1, n2);
  }
  else if (operator === 2){
    multiply(n1,n2);
  }
  else if (operator === 3){
    divide(n1, n2);
  }
  else{
    return;
  }
}

HTML #

<section id="display">0</section>
<section class="buttons">
  <div class="row" id="r1">
    <button id="clear" class="symbol">C</button>
    <button id="inverse" class="symbol"><sup>+</sup>/-</button>
    <button id="percent" class="symbol">%</button>
    <button id="divide" class="symbol">&divide;</button>
  </div>
  <div class="row" id="r2">
    <button id="seven" class="number">7</button>
    <button id="eight" class="number">8</button>
    <button id="nine" class="number">9</button>
    <button id="multiply" class="symbol">&times;</button>
  </div>
  <div class="row" id="r3">
    <button id="four" class="number">4</button>
    <button id="five" class="number">5</button>
    <button id="six" class="number">6</button>
    <button id="minus" class="symbol">-</button>
  </div>
  <div class="row" id="r4">
    <button id="one" class="number">1</button>
    <button id="two" class="number">2</button>
    <button id="three" class="number">3</button>
    <button id="plus" class="symbol">+</button>
  </div>
  <div class="row" id="r5">
    <button id="zero" class="number">0</button>
    <button id="dot" class="symbol">.</button>
    <button id="equal">=</button>
  </div>
</section>

修复方案 #

关键问题点 #

1. 变量初始化错误：n2初始值为0，但判断条件用了n2===null，永远不会触发；symbols.forEach里的operator = 0会在每次绑定事件时重置运算符，导致首次运算逻辑混乱。
2. 链式运算逻辑缺失：点击新运算符时，没有先完成上一次的运算并更新n1为结果，而是直接覆盖n1为当前显示值。
3. 函数返回值处理不当：operate函数没有返回运算结果，且divide函数里displayVal赋值错误（写成了n1而不是n1/n2）。

修改后的核心代码 #

1. 修正变量初始化

let n1 = null; // 初始为null，表示还未输入第一个数
let operator = null;
let n2 = null;

2. 修正运算符点击事件逻辑

移除symbols.forEach里的operator = 0，并修改switch部分：

symbols.forEach(symbol => {
  symbol.addEventListener('click', function(e){
    const currentSymbol = e.target.textContent;

    // 处理清除按钮
    if (currentSymbol === 'C') {
      displayVal = '0';
      display.textContent = '0';
      n1 = null;
      operator = null;
      n2 = null;
      equalPressed = false;
      return;
    }

    // 如果已经有运算符和第一个数，先完成上一次运算
    if (n1 !== null && operator !== null) {
      n2 = Number.parseInt(displayVal);
      const currentResult = operate(n1, operator, n2);
      n1 = currentResult;
      displayVal = currentResult.toString();
      display.textContent = displayVal;
    } else {
      // 第一次点击运算符，记录第一个数
      n1 = Number.parseInt(displayVal);
    }

    // 记录新的运算符
    switch(currentSymbol){
      case '+':
        operator = 0;
        break;
      case '-':
        operator = 1;
        break;
      case '×':
        operator = 2;
        break;
      case '÷':
        operator = 3;
        break;
    }

    // 清空显示，准备输入第二个数
    displayVal = '0';
    display.textContent = '0';
    equalPressed = false;
  })
})

3. 修正运算函数

function divide(n1, n2){
  const quotient = n1 / n2;
  displayVal = quotient;
  display.textContent = quotient;
  return quotient;
}

function operate(n1, operator, n2){
  switch(operator){
    case 0:
      return add(n1, n2);
    case 1:
      return subtract(n1, n2);
    case 2:
      return multiply(n1, n2);
    case 3:
      return divide(n1, n2);
    default:
      return n1;
  }
}

4. 修正等于按钮逻辑（可选优化）

equal.addEventListener('click', function(){
  if (equalPressed === true || n1 === null || operator === null){
    return;
  }
  n2 = Number.parseInt(displayVal);
  equalPressed = true;
  const finalResult = operate(n1, operator, n2);
  n1 = finalResult; // 支持点击=后继续链式运算
  displayVal = finalResult.toString();
})

修复后效果 #

输入3+3+3时，第一次点击+会计算3+3得到6，更新n1为6，然后等待输入下一个数；输入第二个3后点击+，会计算6+3得到9，实现正确的链式运算。

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