JavaScript实现计算器Del删除按钮功能异常修复

你的删除功能代码存在两个逻辑错误，才会出现显示异常、内容不对的问题：

• del()函数里直接把screen.value.length - 1（也就是输入内容的长度减1的数字）赋值给显示屏，没有做字符串截断操作，相当于直接给输入框填了个数字
• del()函数没有设置返回值，外部执行string = del()时拿到的默认值是undefined，会直接导致显示异常

用字符串的slice(0, -1)方法实现截取除最后一位外的全部内容，同时加边界判断：如果输入内容已经为空，就直接返回空字符串，避免索引报错。
修正后的核心JS代码如下：

let string = '';
let screen = document.getElementById('screen');
let buttons = document.querySelectorAll('.button');

function del() {
  // 边界判断：内容为空时直接返回空
  if (!string) return '';
  // 截取0到倒数第一位之前的内容，也就是删掉最后一个字符
  return string.slice(0, -1);
}

Array.from(buttons).forEach((button) => {
  button.addEventListener('click', (e) => {
    if (e.target.innerHTML == '=') {
      string = eval(string).toString();
      screen.value = string;
    } else if (e.target.innerHTML == 'C') {
      string = "";
      screen.value = string;
    } else if (e.target.innerHTML == 'Del') {
      string = del();
      screen.value = string;
    } else {
      string = string + e.target.innerHTML;
      screen.value = string;
    }
  })
})

改动说明 #

• 把原来分散的document.querySelector('input')统一换成提前获取好的screen变量，减少DOM查询性能消耗
• 删除函数只负责处理字符串截断逻辑，返回处理后的新值，不再直接操作DOM，避免逻辑冲突
• 给等号计算后的结果加toString()转换，避免后续拼接输入时出现类型错误
• 增加空值判断，删除到内容为空时不会出现异常值

原有HTML和CSS代码不需要调整，替换JS部分即可正常实现单字符删除功能。

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