JavaScript计算器等号按钮异常及运算符显示问题求助

问题1：等号按钮无法正常工作 #

你的equal()函数错误地将compute()的返回值赋值给this.currentOperand，但compute()本身没有返回值（它直接修改实例的currentOperand属性），导致赋值后currentOperand变成undefined。另外，获取等号按钮时误用了querySelectorAll，页面中只有一个等号按钮，应该用querySelector，否则无法直接绑定点击事件。

修复代码 #

// 修正等号按钮获取方式
const equals = document.querySelector('[data-equals]');

// 修正equal函数
equal() {
    this.compute()
    this.previousOperand = ''
    this.operation = undefined
    console.log(this.currentOperand)
}

问题2：运算符点击后不显示在显示屏 #

chooseOperation()函数中，仅将currentOperand赋值给previousOperand，未拼接运算符，导致显示屏上半部分只显示数字，不显示运算符。同时，修改previousOperand后，compute()函数需要提取数字部分进行计算。

修复代码 #

chooseOperation(operation) {
    if (this.currentOperand === '') return
    if (this.previousOperand !== '') {
        this.compute()
    }
    this.operation = operation
    // 拼接数字与运算符，让显示屏显示完整表达式前缀
    this.previousOperand = `${this.currentOperand} ${operation}`
    this.currentOperand = ''
    console.log(operation)
}

compute() {
    // 提取previousOperand中的数字部分（去掉运算符）
    const prev = parseFloat(this.previousOperand.split(' ')[0])
    const current = parseFloat(this.currentOperand)

   if (this.operation === '÷') {
    this.currentOperand = prev / current
   } else if (this.operation === '*') {
    this.currentOperand = prev * current
   } else if (this.operation === '+') {
    this.currentOperand = prev + current
   } else if (this.operation === '-') {
    this.currentOperand = prev - current
   }
}

补充修复：遗漏的allClear按钮定义 #

原代码中直接使用allClear但未获取该元素，需补充：

const allClear = document.querySelector('[data-all-clear]');

完整修复后的JavaScript代码 #

const del = document.querySelector('[data-delete]');
const number = document.querySelectorAll('[data-number]');
const operand = document.querySelectorAll('[data-operand]');
const equals = document.querySelector('[data-equals]');
const previousOperandTextElement = document.querySelector('[data-previous-operand]');
const currentOperandTextElement = document.querySelector('[data-current-operand]');
const allClear = document.querySelector('[data-all-clear]');

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

    clear() {
        this.currentOperand = ''
        this.previousOperand = ''
        this.operation = undefined
    }

    delete() {
        this.currentOperand = this.currentOperand.slice(0, -1)
    }

    appendNumber(number) {
        if (this.currentOperand.includes('.') && number === '.') return
        this.currentOperand = this.currentOperand + number
        console.log(this.currentOperand)
    }

    chooseOperation(operation) {
        if (this.currentOperand === '') return
        if (this.previousOperand !== '') {
            this.compute()
        }
        this.operation = operation
        this.previousOperand = `${this.currentOperand} ${operation}`
        this.currentOperand = ''
        console.log(operation)
    }

    compute() {
        const prev = parseFloat(this.previousOperand.split(' ')[0])
        const current = parseFloat(this.currentOperand)

       if (this.operation === '÷') {
        this.currentOperand = prev / current
       } else if (this.operation === '*') {
        this.currentOperand = prev * current
       } else if (this.operation === '+') {
        this.currentOperand = prev + current
       } else if (this.operation === '-') {
        this.currentOperand = prev - current
       }
    }

    equal() {
        this.compute()
        this.previousOperand = ''
        this.operation = undefined
        console.log(this.currentOperand)
    }

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


const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement)

number.forEach(function(button) {
    button.addEventListener('click', function() {
        calculator.appendNumber(button.innerText)
        calculator.updateDisplay()
    })
})

operand.forEach(function(button) {
    button.addEventListener('click', function() {
        calculator.chooseOperation(button.innerText)
        calculator.updateDisplay()
    })
})

del.addEventListener('click', function() {
    calculator.delete()
    calculator.updateDisplay()
})

allClear.addEventListener('click', function() {
    calculator.clear()
    calculator.updateDisplay()
})

equals.addEventListener('click', function() {
    calculator.equal()
    calculator.updateDisplay()
})

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