基于JavaScript的计算器点击按钮数值无法显示的问题排查与修复

核心问题分析与修复步骤 #

1. 类属性未初始化导致初始值异常

问题：Calculator类构造函数未初始化currentOperand、previousOperand和operation属性，首次调用appendNumber时this.currentOperand为undefined，执行toString()后会变成字符串"undefined"，最终拼接出undefined1这类错误内容。

修复：在构造函数中添加属性初始化：

constructor(previousOperandTextElement, currentOperandTextElement) { 
    this.previousOperandTextElement = previousOperandTextElement;
    this.currentOperandTextElement = currentOperandTextElement;
    // 初始化核心运算属性
    this.currentOperand = '';
    this.previousOperand = '';
    this.operation = undefined;
}

2. updateDisplay方法赋值逻辑错误

问题：该方法未正确使用getDisplayNumber的格式化返回值，同时历史操作数的赋值语句无效：

• 原代码直接给当前操作数元素赋值原始值，后续调用getDisplayNumber却未使用返回结果
• 历史操作数仅写了模板字符串，未完成赋值操作

修复：修改updateDisplay方法：

updateDisplay() {
    // 使用格式化后的数字更新当前操作数显示
    this.currentOperandTextElement.innerText = this.getDisplayNumber(this.currentOperand);
    if (this.operation != null) {
        // 正确拼接历史操作数与运算符
        this.previousOperandTextElement.innerText = `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`;
    } else {
        this.previousOperandTextElement.innerText = '';
    }   
}

3. appendNumber方法输入内容处理

问题：HTML按钮的innerText包含多余空格（如<button data-number> 1 </button>），导致拼接操作数时会混入空格字符。

修复：在方法内部去除输入内容的空格：

appendNumber(number) {
    number = number.trim(); // 移除输入内容的首尾空格
    if (number === '.' && this.currentOperand.includes('.')) return;
    this.currentOperand = this.currentOperand.toString() + number.toString();
}

4. compute方法运算逻辑错误

问题：所有运算分支都写了加法逻辑，减法、乘法、除法的运算规则完全错误。

修复：修正各分支的运算逻辑，同时增加除数不为0的判断：

compute() {
    let computation;
    const prev = parseFloat(this.previousOperand);
    const current = parseFloat(this.currentOperand);
    if (isNaN(prev) || isNaN(current)) return;
    switch (this.operation) {
        case '+':
            computation = prev + current;
            break;
        case '-':
            computation = prev - current; // 修正为减法
            break;
        case '*':
            computation = prev * current; // 修正为乘法
            break;
        case '÷':
            // 避免除数为0的错误
            computation = current !== 0 ? prev / current : 'Error';
            break;
        default:
            return;
    }
    this.currentOperand = computation;
    this.operation = undefined;
    this.previousOperand = '';
}

完整修复后的JavaScript代码 #

class Calculator {
    constructor(previousOperandTextElement, currentOperandTextElement) { 
        this.previousOperandTextElement = previousOperandTextElement;
        this.currentOperandTextElement = currentOperandTextElement;
        this.currentOperand = '';
        this.previousOperand = '';
        this.operation = undefined;
    }

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

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

    appendNumber(number) {
        number = number.trim();
        if (number === '.' && this.currentOperand.includes('.')) return;
        this.currentOperand = this.currentOperand.toString() + number.toString();
    }

    chooseOperation(operation) {
        operation = operation.trim();
        if (this.currentOperand === '') return;
        if (this.previousOperand !== '') {
            this.compute();
        }
        this.operation = operation;
        this.previousOperand = this.currentOperand;
        this.currentOperand = '';
    }

    compute() {
        let computation;
        const prev = parseFloat(this.previousOperand);
        const current = parseFloat(this.currentOperand);
        if (isNaN(prev) || isNaN(current)) return;
        switch (this.operation) {
            case '+':
                computation = prev + current;
                break;
            case '-':
                computation = prev - current;
                break;
            case '*':
                computation = prev * current;
                break;
            case '÷':
                computation = current !== 0 ? prev / current : 'Error';
                break;
            default:
                return;
        }
        this.currentOperand = computation;
        this.operation = undefined;
        this.previousOperand = '';
    }

    getDisplayNumber(number) { 
        if (number === 'Error') return number;
        const stringNumber = number.toString();
        const integerDigits = parseFloat(stringNumber.split('.')[0]);
        const decimalDigits = stringNumber.split('.')[1];
        let integerDisplay;
        if (isNaN(integerDigits)) {
            integerDisplay = '';
        } else {
            integerDisplay = integerDigits.toLocaleString('en', {
                maximumFractionDigits: 0 
            });
        }
        if (decimalDigits != null) {
            return `${integerDisplay}.${decimalDigits}`;
        } else {
            return integerDisplay;
        }
    }

    updateDisplay() {
        this.currentOperandTextElement.innerText = this.getDisplayNumber(this.currentOperand);
        if (this.operation != null) {
            this.previousOperandTextElement.innerText = `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`;
        } else {
            this.previousOperandTextElement.innerText = '';
        }   
    }
}

const numberButtons = document.querySelectorAll('[data-number]');
const operationButtons = document.querySelectorAll('[data-operation]');
const equalsButton = document.querySelector('[data-equals]');
const deleteButton = document.querySelector('[data-delete]');
const allClearButton = document.querySelector('[data-all-clear]');
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();
    })
})

equalsButton.addEventListener('click', () => {
    calculator.compute();
    calculator.updateDisplay();
})

allClearButton.addEventListener('click', () => {
    calculator.clear();
    calculator.updateDisplay();
}) 

deleteButton.addEventListener('click', () => {
    calculator.delete();
    calculator.updateDisplay();
}) 

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