计算器多数字连续运算功能故障求助 | Odin Project实战问题

我正在完成The Odin Project: Foundations的最终挑战——开发一款计算器，此前课程内容都顺利完成，但卡在了连续多步运算的实现上。目前计算器仅支持「两个数字 + 一个运算符」的简单运算，无法实现像2 + 2 * 3 =应得到12这种「连续输入多个数字和运算符后按等号计算」的功能。

现有代码 #

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <script src="script.js" defer></script>
    <title>Calculator</title>
  </head>
  <body>
    <div class="outer-container">
      <div class="container">
        <p class="display"></p>
        <div class="buttons-container">
          <div class="top-buttons">
            <button class="clear-button">Clear</button>
            <button class="delete-button">Delete</button>
          </div>
          <div class="buttons-row">
            <button class="num-button" value="7" id="button7">7</button>
            <button class="num-button" value="8" id="button8">8</button>
            <button class="num-button" value="9" id="button9">9</button>
            <button class="op-button" value="/">÷</button>
          </div>
          <div class="buttons-row">
            <button class="num-button" value="4" id="button4">4</button>
            <button class="num-button" value="5" id="button5">5</button>
            <button class="num-button" value="6" id="button6">6</button>
            <button class="op-button" value="*">x</button>
          </div>
          <div class="buttons-row">
            <button class="num-button" value="1" id="button1">1</button>
            <button class="num-button" value="2" id="button2">2</button>
            <button class="num-button" value="3" id="button3">3</button>
            <button class="op-button" value="-">-</button>
          </div>
          <div class="buttons-row">
            <button class="num-button" value="0" id="button0">0</button>
            <button class="num-button" value=".">.</button>
            <button class="equals-button">=</button>
            <button class="op-button" value="+">+</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

.outer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 800px;
}

.container {
  border: 2px solid black;
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 300px;
  padding-top: 5px;
  padding-bottom: 5px;
  align-items: center;
}

.display {
  border: 1px solid black;
  margin: 10px 5px;
  height: 30px;
  width: 170px;
  display: flex;
  justify-content: end;
  align-items: center;
}

.buttons-container {
  flex: 0;
}

.top-buttons {
  display: flex;
  justify-content: end;
  margin: 5px;
}

.buttons-row {
  display: flex;
  justify-content: center;
  margin: 5px;
}

.clear-button,
.delete-button {
  width: 50px;
}

button {
  height: 40px;
  width: 40px;
  margin: 2px;
}

JavaScript

const numButtons = document.querySelectorAll(".num-button");
const clearButton = document.querySelector(".clear-button");
const deleteButton = document.querySelector(".delete-button");
const operatorButtons = document.querySelectorAll(".op-button");
const equalsButton = document.querySelector(".equals-button");
const display = document.querySelector("p");

let displayValue = "";
display.innerText = 0;
let previousNumber = "";

// Calculator Functions

function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

function multiply(a, b) {
  return a * b;
}

function divide(a, b) {
  return a / b;
}

let firstNumber = "";
let secondNumber = "";
let operator = "";
let total = "";

function operate(op, num1, num2) {
  if (op === "+") return add(num1, num2);
  if (op === "-") return subtract(num1, num2);
  if (op === "*") return multiply(num1, num2);
  if (op === "/") return divide(num1, num2);
}

numButtons.forEach((button) => {
  button.addEventListener("click", (event) => {
    const clickedNumber = event.target.value;
    if (operator === "" && secondNumber === "") {
      firstNumber = parseFloat(firstNumber + clickedNumber);
      console.log("firstNumber", firstNumber);
      displayValue = firstNumber.toString();
    } else {
      secondNumber = parseFloat(secondNumber + clickedNumber);
      console.log("secondNumber", secondNumber);
      displayValue = secondNumber.toString();
    }

     if (firstNumber !== "" && secondNumber !== "") {
       firstNumber = operate(operator, firstNumber, secondNumber);
       secondNumber = "";
       secondNumber = parseFloat(secondNumber + clickedNumber);
       displayValue = secondNumber.toString();
     }

    display.innerText = displayValue;
  });
});

// Operator Buttons - This gets the operator as a string - works fine
operatorButtons.forEach((button) => {
  button.addEventListener("click", (event) => {
    operator = event.target.value;
  });
});

// Equals button - works with two numbers
equalsButton.addEventListener("click", () => {
  displayValue = operate(operator, firstNumber, secondNumber);
  display.innerText = operate(operator, firstNumber, secondNumber);
  total = operate(operator, firstNumber, secondNumber);
});

// Clear button - works fine
clearButton.addEventListener("click", () => {
  displayValue = "";
  display.innerText = 0;
  firstNumber = "";
  secondNumber = "";
  operator = "";
});

当前问题细节 #

我一直聚焦于numButtons.forEach代码段调试：

• 原本的逻辑能正常处理「两个数字+一个运算符」的运算，但新增连续运算的逻辑后出现两个问题：
  1. 输入多步运算时，新数字会错误拼接到secondNumber中，比如输入5 + 5 + 5最终得到60，实际是firstNumber为5，secondNumber被拼接成了55。
  2. 新增逻辑后无法给secondNumber输入多位数，注释掉新增的if判断后，又能正常输入多位数。

希望能得到解决方向。

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