点击计算器数字按钮报错：Uncaught TypeError: Cannot read properties of undefined (reading 'toString')

你报错的原因是this.currentOperand变量未初始化，调用toString()的时候该变量为undefined，本质是Calculator类的clear方法变量赋值错误：

• 构造函数里你把传入的两个展示文本的DOM元素，赋值给了this.previousOperandTextElement和this.currentOperandTextElement，但在clear方法里错误把这两个DOM变量覆盖成了空字符串，后续渲染也会受影响
• 你用来存储计算数值的this.currentOperand、this.previousOperand变量完全没有初始化，所以调用toString()时直接抛出类型错误

只需要修改Calculator类的clear方法，还可以顺便给appendNumber加个小数点重复输入的限制：

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

  clear() {
    // 修正赋值：给存储数值的变量初始化，不要覆盖DOM元素变量
    this.previousOperand = ''
    this.currentOperand = ''
    this.operation = undefined
  }

  appendNumber(number) {
    // 可选优化：避免重复输入小数点
    if (number === '.' && this.currentOperand.includes('.')) return
    this.currentOperand = this.currentOperand.toString() + number.toString()
  }

  // 其余的delete、chooseOperator、compute等空方法保持不变，后续补逻辑即可
  delete() {

  }

  chooseOperator(operation) {

  }

  compute() {

  }

  updateDisplay() {
    this.currentOperandTextElement.innerHTML = this.currentOperand
  }


}

修改后点击数字按钮就可以正常拼接输入内容、展示到页面上了。

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