计算器DEL按钮功能失效求助：JavaScript实现问题排查

你的DEL按钮失效有两个关键问题，下面是具体修复方案：

1. 错误的DOM元素选择 #

你使用了document.querySelectorAll('[data-delete]')获取DEL按钮，但这个方法返回的是元素集合（NodeList），而非单个元素。直接给集合绑定addEventListener不会生效，因为集合本身没有这个方法。

修复：改用document.querySelector（因为页面中只有一个DEL按钮）：

const deleteButton = document.querySelector('[data-delete]')

2. 未将切片结果赋值回文本内容 #

slice()方法会返回一个新的字符串，但不会修改原字符串。你只是调用了slice，却没有把结果重新赋值给currentOperation.textContent，所以页面显示不会变化。

修复：在delete1函数中完成赋值操作（新增空内容判断避免报错）：

function delete1() {
  if (currentOperation.textContent) {
    currentOperation.textContent = currentOperation.textContent.slice(0, -1);
  }
}

完整修正后的JavaScript代码 #

const numberButtons = document.querySelectorAll('[data-number]')
const operatorButtons = document.querySelectorAll('[data-operator]')
const deleteButton = document.querySelector('[data-delete]') // 修复元素选择
const allClearButton = document.querySelector('[data-allclear]')
const equalsButton = document.querySelector('[data-equals]')
const lastOperation = document.getElementById('operationLast')
const currentOperation = document.getElementById('operationCurrent')


numberButtons.forEach((button) => button.addEventListener('click', () => appendNumber(button.textContent))) 

deleteButton.addEventListener('click', delete1)
allClearButton.addEventListener('click',allclear)

function appendNumber(number){
    currentOperation.textContent += number
}

function allclear() {
 lastOperation.textContent = ""
 currentOperation.textContent = ''
}

function delete1() {
  if (currentOperation.textContent) {
    currentOperation.textContent = currentOperation.textContent.slice(0, -1); // 修复赋值逻辑
  }
}

这样修改后，DEL按钮就能正常删除当前输入的最后一个字符了。

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