添加指定代码后JavaScript计算器updateDisplay函数失效求助

你遇到的问题是由几个代码细节错误共同导致的，以下是具体问题和修复方案：

核心错误点 #

• HTML结构嵌套错误：data-current-operand元素被嵌套在data-previous-operand元素内部，当你设置previousOperandTextElement.innerText时，会直接覆盖掉内部的current-operand元素，导致输入的数字无法显示。
• 初始值设置错误：clear()方法里的currentOperand和previousOperand被初始化为空格" "，而非空字符串""，会导致数字拼接时开头带空格，且显示异常。
• 逻辑运算符错误：appendNumber方法里的判断条件用了位运算符&，而非逻辑与运算符&&，导致条件判断失效，可能引发意外行为。
• 按钮属性错误：等于按钮的属性写成了data equals，正确的应该是data-equals，否则后续绑定事件会失败。

修复后的代码 #

JavaScript代码 #

class Calculator {
  constructor(previousOperandTextElement, currentOperandTextElement) {
    this.previousOperandTextElement = previousOperandTextElement;
    this.currentOperandTextElement = currentOperandTextElement;
    this.clear();
  }

  clear() {
    this.currentOperand = ""; // 改为空字符串
    this.previousOperand = ""; // 改为空字符串
    this.operation = undefined;
  }

  delete() {}

  appendNumber(number) {
    if (number === "." && this.currentOperand.includes(".")) return; // 替换&为&&
    this.currentOperand = this.currentOperand.toString() + number.toString();
  }

  chooseOperation(operation) {
    this.operation = operation;
    this.previousOperand = this.currentOperand;
    this.currentOperand = "";
  }

  compute() {}

  updateDisplay() {
    this.currentOperandTextElement.innerText = this.currentOperand;
    this.previousOperandTextElement.innerText = this.previousOperand;
  }
}

const numberButtons = document.querySelectorAll("[data-number]");
const operationButtons = document.querySelectorAll("[data-operation]");
const equalsButton = document.querySelector("[data-equals]");
const delButton = document.querySelector("[data-delete]");
const allClearButton = document.querySelector("[data-allclear]");
const previousOperandTextElement = document.querySelector(
  "[data-previous-operand]"
);
const currentOperandTextElement = document.querySelector(
  "[data-current-operand]"
);

const calculator = new Calculator(
  previousOperandTextElement,
  currentOperandTextElement
);

numberButtons.forEach(button => {
  button.addEventListener("click", () => {
    calculator.appendNumber(button.innerText);
    calculator.updateDisplay();
  });
});

operationButtons.forEach(button => {
  button.addEventListener("click", () => {
    calculator.chooseOperation(button.innerText);
    calculator.updateDisplay();
  });
});

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
    <link href="styles.css" rel="stylesheet" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="calculator-grid">
      <div class="output">
        <!-- 修正嵌套结构，让两个元素同级 -->
        <div data-previous-operand class="previous-operand"></div>
        <div data-current-operand class="current-operand"></div>
      </div>
      <button data-allclear class="span-two">AC</button>
      <button data-delete>DEL</button>
      <button data-operation>÷</button>
      <button data-number>1</button>
      <button data-number>2</button>
      <button data-number>3</button>
      <button data-operation>*</button>
      <button data-number>4</button>
      <button data-number>5</button>
      <button data-number>6</button>
      <button data-operation>+</button>
      <button data-number>7</button>
      <button data-number>8</button>
      <button data-number>9</button>
      <button data-operation>-</button>
      <button data-number>.</button>
      <button data-number>0</button>
      <!-- 修正属性为data-equals -->
      <button data-equals class="span-two">=</button>
    </div>
  </body>
</html>

修复后，updateDisplay方法就能正常工作，输入的数字和操作符都会正确显示在对应的区域。

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