计算器完成运算后点击数字键，如何重置operator等全局变量？

点击等号显示运算结果后，按下数字键时，计算器会沿用上次运算的运算符继续计算，而非启动新运算。

我定义了三个全局变量：num1、num2、operator，同时设置了prevDisplay（历史显示区）和currentDisplay（当前显示区）。

问题复现步骤 #

1. 输入12

console.log(num1) // 12
console.log(num2) // 
console.log(operator) //

2. 按下+

console.log(num1) // 
console.log(num2) // 12
console.log(operator) // +

3. 输入4

console.log(num1) // 4
console.log(num2) // 12
console.log(operator) // +

4. 点击=，显示16

console.log(num1) // 
console.log(num2) // 16
console.log(operator) // +

5. 此时输入5想开始新运算（如5-4）：

console.log(num1) // 5
console.log(num2) // 16
console.log(operator) // +

6. 按下-，计算器自动执行5+16得到21：

console.log(num1) //
console.log(num2) // 21
console.log(operator) // -

我需要实现的效果：计算器完成运算后，用户按下数字键（运算符键除外）时，将num1、num2和operator的值重置为空字符串。

我的代码 #

HTML部分 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/x-icon" href="img/favicon.ico">
</head>
<body>
    <div class="calcBody">
        <div class="calcDisplay">
            <div class="screenDisplay">
                <div class="prevDisplay"></div>
                <div class="currentDisplay">0</div>
            </div>
        </div>
        <div class="buttonsBody">
            <div class="numberButtons">
                <!--Row 1-->
                <button class="clearButton inputButton" data-all="AC"><span class="buttonsText">AC</span></button>
                <button class="deleteButton inputButton" data-all="C"><span class="buttonsText">C</span></button>
                <button class="percentButton inputButton" data-all="%" data-operator="%"><span class="buttonsText">%</span></button>
                <button class="divideButton inputButton" data-all="÷" data-operator="÷"><span class="buttonsText">÷</span></button>
                <!--Row 2-->
                <button class="sevenButton inputButton" data-all="7" data-num="7"><span class="buttonsText">7</span></button>
                <button class="eightButton inputButton" data-all="8" data-num="8"><span class="buttonsText">8</span></button>
                <button class="nineButton inputButton" data-all="9" data-num="9"><span class="buttonsText">9</span></button>
                <button class="multiplyButton inputButton" data-all="×" data-operator="×"><span class="buttonsText">×</span></button>
                <!--Row 3-->
                <button class="fourButton inputButton" data-all="4" data-num="4"><span class="buttonsText">4</span></button>
                <button class="fiveButton inputButton" data-all="5" data-num="5"><span class="buttonsText">5</span></button>
                <button class="sixButton inputButton" data-all="6" data-num="6"><span class="buttonsText">6</span></button>
                <button class="minusButton inputButton" data-all="-" data-operator="-"><span class="buttonsText">-</span></button>
                <!--Row 4-->
                <button class="oneButton inputButton" data-all="1" data-num="1"><span class="buttonsText">1</span></button>
                <button class="twoButton inputButton" data-all="2" data-num="2"><span class="buttonsText">2</span></button>
                <button class="threeButton inputButton" data-all="3" data-num="3"><span class="buttonsText">3</span></button>
                <button class="plusButton inputButton" data-all="+" data-operator="+"><span class="buttonsText">+</span></button>
                <!--Row 5 -->
                <button class="doubleZeroButton inputButton" data-all="00" data-num="00"><span class="buttonsText">00</span></button>
                <button class="zeroButton inputButton" data-all="0" data-num="0"><span class="buttonsText">0</span></button>
                <button class="decimalButton inputButton" data-all="."><span class="buttonsText">.</span></button>
                <button class="equalsButton inputButton" data-all="="><span class="buttonsText">=</span></button>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

JavaScript部分 #

const prevDisplay = document.querySelector('.prevDisplay');
const currentDisplay = document.querySelector('.currentDisplay');
const inputButton = document.querySelectorAll('.inputButton');
const divideButton = document.querySelector('.divideButton');
const equalsButton = document.querySelector('.equalsButton');
const operatorButton = document.querySelectorAll('[data-operator]');
const numberButton = document.querySelectorAll('[data-num]');
const clearButton = document.querySelector('.clearButton');
const deleteButton = document.querySelector('.deleteButton');
const decimalButton = document.querySelector('.decimalButton')
//Global variables
let num1 = ""; 
let operator = "";
let num2 = "";
let removeDot;
//Current display
numberButton.forEach((btn) => {
  btn.addEventListener('click', (e) => {
    handleNumber(e.target.textContent);
  })

}
)
function handleNumber(number){
  if (num1.length <= 21){
    num1 += number;
    currentDisplay.textContent = num1;
  }
}
//Previous display
operatorButton.forEach((btn) => {
  btn.addEventListener('click', (e) => {
    handleOperator(e.target.textContent);
  })
})
function handleOperator(op){
  if (num1 == '' && num2 == ''){
    num1 = '0';
  } 
  else if (operator == '' && num2 !== ''){
    num2 = ''
  }  
  else if (num2 === "") {
    num2 = num1;
    operatorCheck(op);
  } else if (num1 === "") {
    operatorCheck(op);
  } else {
    operate();
    operator = op;
    currentDisplay.textContent = "0";
    prevDisplay.textContent = num2 + " " + operator;
  }
}
function operatorCheck(text) {
  operator = text;
  prevDisplay.textContent = num2 + " " + operator;
  currentDisplay.textContent = "0";
  num1 = "";
}
//Clear button
function clearCalc(){
  prevDisplay.textContent = '';
  currentDisplay.textContent = '';
  num1 = '';
  num2 = '';
  operator = '';
}
clearButton.addEventListener('click', clearCalc)
//Delete button
function deleteCalc(){
  num1 = num1.slice(0, currentDisplay.textContent.length - 1)
  currentDisplay.textContent = currentDisplay.textContent.slice(0, currentDisplay.textContent.length - 1)
}
deleteButton.addEventListener('click', deleteCalc)
//Equals button
function equalsCalc(){
  if (num1 != '' && num2 != ''){
    operate()
  }
}
equalsButton.addEventListener('click', equalsCalc)
//Decimal button
function decimalCalc(){
  if (num1.includes('.') == false){
  currentDisplay.textContent = currentDisplay.textContent + '.'
  num1 = num1 + '.'
    }
}
decimalButton.addEventListener('click', decimalCalc)
//Doing the calculation
function calcPercent(num1, num2){
  return (num2 / 100) * num1
}
function calcDivide(num1, num2){
    return num2 / num1
}
function calcMultiply(num1, num2){
    return num1 * num2
}
function calcSubtract(num1, num2){
    return num2 - num1
}
function calcAdd(num1, num2){
    return num1 + num2
}
function operate() {
    num1 = Number(num1)
    num2 = Number(num2)

    switch (operator) {
      case '+':
        num2 = calcAdd(num1, num2)
        break
      case '-':
        num2 = calcSubtract(num1, num2)
        break
      case '×':
        num2 = calcMultiply(num1, num2)
        break
      case '%':
        num2 = calcPercent(num1, num2)
        break
      case '÷':
        num2 = num2.toString(); 
        if (num1 == 0){
          num2 = "Error, you can't divide by 0"
        } else{
          num2 = calcDivide(num1, num2);
        }
        break
    }
    num2 = roundNum(num2)
    prevDisplay.textContent = "";
    currentDisplay.textContent = num2;
    num1 = '';
  }
  //Round Number
  function roundNum(num){
    return Math.round(num * 1000000) / 1000000;
  }
  //Event listeners for key presses
  window.addEventListener('keydown', removeDot = function(e){
    switch (e.key){
      case "7":
        handleNumber(7)
        break
      case "8":
        handleNumber(8)
        break
      case "9":
        handleNumber(9)
        break
      case "4":
        handleNumber(4)
        break
      case "5":
        handleNumber(5)
        break
      case "6":
        handleNumber(6)
        break
      case "1":
        handleNumber(1)
        break
      case "2":
        handleNumber(2)
        break
      case "3":
        handleNumber(3)
        break
      case "0":
        handleNumber(0)
        break
      case ")":
        handleNumber(00)
        break
      case "Delete":
        clearCalc();
        break
      case "+":
        handleOperator('+')
        break
      case "-":
        handleOperator('-')
        break  
      case "*":
        handleOperator('×')
        break
      case "/":
        handleOperator('÷')
        break
      case "%":
        handleOperator('%')
        break
      case ".":
        decimalCalc();
        break  
      case "Backspace":
        deleteCalc();
        break
      case "Enter":
        e.preventDefault();
        equalsCalc();
        break
    }
  }, true)

解决方案 #

通过新增状态标记+修改数字输入逻辑实现需求，具体修改点如下：

1. 新增状态变量标记运算是否完成：

// 在全局变量区域添加
let isCalculated = false;

2. 修改operate函数，运算完成后标记状态：

function operate() {
    // ... 原有代码不变
    num2 = roundNum(num2)
    prevDisplay.textContent = "";
    currentDisplay.textContent = num2;
    num1 = '';
    isCalculated = true; // 新增：标记运算已完成
}

3. 修改handleNumber函数，数字输入前判断状态并重置：

function handleNumber(number){
  // 新增：如果刚完成运算，重置所有变量
  if (isCalculated) {
    num1 = "";
    num2 = "";
    operator = "";
    isCalculated = false;
  }
  // 原有逻辑保留
  if (num1.length <= 21){
    num1 += number;
    currentDisplay.textContent = num1;
  }
}

修改后，用户完成运算点击等号后，第一次按下数字键时会自动重置所有变量，直接开始新的运算，不会再沿用之前的运算符和数值。

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