计算器AC、等于及11按钮无Alert响应的代码排查求助

核心故障点及修复方案 #

1. 11按钮（data-d）的事件绑定错误 #

你通过document.querySelectorAll(['data-d'])获取到的是节点列表（NodeList），但直接调用deleteButton.addEventListener是错误的——NodeList不支持直接调用该方法，必须像处理数字、运算符按钮那样用forEach遍历绑定。同时这里还有拼写错误：calculator.dsplay应为calculator.display。

修复代码：

deleteButton.forEach(button => {
  button.addEventListener('click', () => {
    calculator.delete()
    calculator.display(button.innerText)
  })
})

2. 等于（=）按钮的方法名不匹配 #

绑定等于按钮事件时调用了calculator.compute()，但你的calculate类中并没有定义compute方法，只有calculation方法，属于方法名错误。

修复代码：

equal.forEach(button => {
  button.addEventListener('click', () => {
    calculator.calculation()
    calculator.display(button.innerText)
  })
})

3. 表单默认提交行为中断事件执行 #

所有计算器按钮都嵌套在<form>标签内，按钮默认类型为submit，点击会触发表单提交，导致页面刷新，直接中断JS事件逻辑。

修复方案二选一：

• 给所有计算器按钮添加type="button"属性，比如：

  <button type="button" data-a class="span-2">AC </button>
  <button type="button" data-d>11</button>
  <button type="button" data-e class="span-2">=</button>
  

• 给表单添加事件阻止默认提交行为：

  document.querySelector('.calculator form').addEventListener('submit', (e) => {
    e.preventDefault()
  })
  

## 额外的小问题修正
- 显示区域选择器错误：`document.querySelector(['data-first-input'])`应改为`document.querySelector('[data-first]')`，`document.querySelector(['data-second-input'])`改为`document.querySelector('[data-second]')`，匹配HTML中的属性名。
- CSS无效语法：`input`标签的`color: calc(var9(a));`是错误写法，会导致输入框文字颜色异常，建议删除或替换为有效颜色值。

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