基于类实现的JavaScript计算器点击无响应、键盘功能失效求助

安全阿岳

2026-8-29

故障原因

核心点击无响应问题：所有计算器按键用的是<input type="button">元素，这类元素的显示内容存放在value属性中，你给按钮绑定事件时取的是button.innerText，拿到的永远是空字符串，传给计算器类的参数为空，屏幕自然不会显示任何内容。
键盘逻辑完全脱离核心状态：你写的键盘输入函数直接给显示区域的div元素加value——div本身没有value属性，而且所有键盘操作都没调用Calculator类的内置方法，类内部存储的操作数、运算符状态完全没更新，就算强行改了DOM也会被类的刷新逻辑覆盖。
键盘事件判断逻辑错误：开头的拦截规则把运算符、小数点等按键的keyCode全部挡在了处理逻辑外；退格键触发后没调用updateDisplay()，删了内容也不会刷新屏幕；代码里还引用了从未定义的display变量，触发对应分支会直接抛错。
隐性拼写问题：等号按钮的自定义属性写成了data-equels（正确拼写应为data-equals），目前JS选择器和HTML属性匹配不影响运行，但后续维护容易出问题。

修复步骤

先修复按钮取值问题，把所有按钮事件里取文本的innerText替换为value，修改后代码如下：

// 数字按钮事件
numberButtons.forEach(button => {
    button.addEventListener('click', () => {
    calculator.appendNumber(button.value)
    calculator.updateDisplay()
    })
})

// 运算符按钮事件
operationButtons.forEach(button => {
    button.addEventListener('click', () => {
    calculator.chooseOperation(button.value)
    calculator.updateDisplay()
    })
})

改完这部分点击按钮的功能就会恢复正常。

删掉原来写的keyboardInput、backspaceKeyEvent两个函数，还有对应的document.onkeypress、document.onkeydown绑定，替换为统一的键盘事件处理，完全复用计算器类的已有方法，不要直接操作DOM：

document.addEventListener('keydown', (e) => {
    const inputKey = e.key
    // 处理数字和小数点输入
    if (/[0-9.]/.test(inputKey)) {
        e.preventDefault()
        calculator.appendNumber(inputKey)
        calculator.updateDisplay()
        return
    }
    // 处理功能键和运算符
    switch(inputKey) {
        case '+':
        case '-':
            e.preventDefault()
            calculator.chooseOperation(inputKey)
            calculator.updateDisplay()
            break
        case '*':
            e.preventDefault()
            // 键盘乘号对应界面显示的×
            calculator.chooseOperation('×')
            calculator.updateDisplay()
            break
        case '/':
            e.preventDefault()
            // 键盘除号对应界面显示的÷
            calculator.chooseOperation('÷')
            calculator.updateDisplay()
            break
        case 'Enter':
        case '=':
            e.preventDefault()
            calculator.compute()
            calculator.updateDisplay()
            break
        case 'Backspace':
            e.preventDefault()
            calculator.delete()
            calculator.updateDisplay()
            break
        case 'c':
        case 'C':
            e.preventDefault()
            calculator.clear()
            calculator.updateDisplay()
            break
    }
})

补充说明：你原来写的括号输入逻辑目前无法生效，因为现有Calculator类的compute方法仅支持简单二元连续运算，没有做表达式优先级、括号嵌套的处理，需要先重构计算逻辑才能支持括号功能，建议先把基础运算跑通再迭代复杂功能。

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