JS计算器删除功能显示异常：点击DEL键出现'DE'字符求助

问题现象 #

JS计算器计算功能正常，但点击DEL删除键时，屏幕会在原有数字后显示"DE"，无法正常删除最后一位数字。

原因定位 #

1. DEL按钮被包含在Buttonn选择器（.buttons button）范围内，点击DEL时会同时触发两个事件：
   • 所有按钮通用的点击事件：将按钮的textContent（即"DEL"）追加到CurrentNum中
   • DEL按钮专属的删除事件：删除CurrentNum的最后一位
     两者叠加后，CurrentNum就变成了「原数字 + "DE"」（追加"DEL"后删掉最后一位）
2. MaxLength限制（设为7）让问题表现出现差异：
   • 当CurrentNum长度≥7时，通用点击事件里的if (CurrentNum.length >= MaxLenght)触发return，不会执行追加"DEL"的操作，此时删除事件能正常删除一位
   • 当CurrentNum长度<7时，通用事件会追加"DEL"，再经过删除事件处理后就显示出"DE"

解决方案 #

修改通用点击事件的绑定范围，只给数字、小数点、运算符按钮绑定输入逻辑，排除DEL和C等非输入类按钮。

修正后的核心代码 #

JavaScript核心修改

// 替换原Buttonn选择器，仅包含输入类按钮
let InputButtons = document.querySelectorAll('.number, .operator, .decimal');

InputButtons.forEach(function(button) {
  button.addEventListener('click', function() {
    /*-----Max lenght-----*/
    if (CurrentNum.length >= MaxLenght) {
      return;
    }

    /*-----No 0 at start-----*/
    if (CurrentNum === '' && button.textContent === '0') {
      return;
    }

    /*-----No multiple decimal points-----*/
    if (button.classList.contains('decimal') && CurrentNum.includes('.')) {
      return;
    }

    /*-----Click decimal at start ==> 0 with decimal-----*/
    if (CurrentNum === '' && button.classList.contains('decimal')) {
      CurrentNum = '0.';
      ScreenNum.textContent = CurrentNum;
    } else {
      CurrentNum += button.textContent;
      ScreenNum.textContent = CurrentNum;
    }
  });
});

完整代码 #

JavaScript

//Function elements
let ScreenNum = document.querySelector('.screen_num');
let Num = document.querySelectorAll('.number');
let Operator = document.querySelectorAll('.operator');
let Calculation = document.querySelector('.calculate');
let Clear = document.querySelectorAll('.clear');
// 仅绑定输入类按钮
let InputButtons = document.querySelectorAll('.number, .operator, .decimal');
let Decimal = document.querySelector('.decimal');
let deleteButton = document.querySelector('.delete');

//Add number on screen
let CurrentNum = '';
let MaxLenght = 7;

InputButtons.forEach(function(button) {
  button.addEventListener('click', function() {
    /*-----Max lenght-----*/
    if (CurrentNum.length >= MaxLenght) {
      return;
    }

    /*-----No 0 at start-----*/
    if (CurrentNum === '' && button.textContent === '0') {
      return;
    }

    /*-----No multiple decimal points-----*/
    if (button.classList.contains('decimal') && CurrentNum.includes('.')) {
      return;
    }

    /*-----Click decimal at start ==> 0 with decimal-----*/
    if (CurrentNum === '' && button.classList.contains('decimal')) {
      CurrentNum = '0.';
      ScreenNum.textContent = CurrentNum;
    } else {
      CurrentNum += button.textContent;
      ScreenNum.textContent = CurrentNum;
    }
  });
});

//Math
let firstNum = '';
let operator = '';
let secondNum = '';
let result = 0;

Operator.forEach(function(operatorButton) {
  operatorButton.addEventListener('click', function() {
    firstNum = CurrentNum;
    operator = operatorButton.textContent;
    secondNum = ''; // 修复原代码拼写错误：secondNumb -> secondNum
    CurrentNum = '';
  });
});

Calculation.addEventListener('click', function() {
  secondNum = CurrentNum;
  let num1 = parseFloat(firstNum);
  let num2 = parseFloat(secondNum);

  if (operator === '+') {
    result = num1 + num2;
  } else if (operator === '-') {
    result = num1 - num2;
  } else if (operator === '*') {
    result = num1 * num2;
  } else if (operator === '/') {
    result = num1 / num2;
  }

  CurrentNum = result.toString();
  ScreenNum.textContent = CurrentNum;
});

//Clear
Clear.forEach(function(clearButton) {
  clearButton.addEventListener('click', function() {
    firstNum = '';
    operator = '';
    secondNum = '';
    result = 0;
    CurrentNum = '';
    ScreenNum.textContent = '0000';
  });
});

//Delete
deleteButton.addEventListener('click', function() {
  if (CurrentNum !== '') {
    CurrentNum = CurrentNum.slice(0, CurrentNum.length - 1);
    ScreenNum.textContent = CurrentNum;
  }
});

HTML

<h1>Calculator</h1>
<div id="calculator">
  <div class="screen">
    <p class="screen_num">0000</p>
  </div>
  <div class="buttons">
    <button class="number">7</button>
    <button class="number">8</button>
    <button class="number">9</button>
    <button class="operator">/</button>
    <button class="number">4</button>
    <button class="number">5</button>
    <button class="number">6</button>
    <button class="operator">*</button>
    <button class="number">1</button>
    <button class="number">2</button>
    <button class="number">3</button>
    <button class="operator">-</button>
    <button class="number">0</button>
    <button class="decimal">.</button>
    <button class="calculate">=</button>
    <button class="operator">+</button>
    <button class="clear">C</button>
    <button class="delete">DEL</button>
  </div>
</div>

额外修复 #

原代码中存在拼写错误：secondNumb = '' 修正为 secondNum = ''，已在代码中修复。

内容的提问来源于stack exchange，提问作者Mijat Goločevac