JS计算器键盘事件问题：Enter键判断不生效求助

扩展JS计算器交互界面时，新增键盘输入功能，期望按下Enter键触发计算并显示结果，但key_type函数中event === 'Enter'的判断始终不生效，导致计算功能无法触发。

问题原因 #

onkeyup="key_type(event)"传入的event是键盘事件对象，并非字符串类型的按键名称，直接将事件对象与字符串'Enter'做全等比较永远不成立。需要读取事件对象的key属性（或code属性）来获取按键名称。

另外原代码中Backspace的处理存在错误：buttonElement --对字符串使用减法操作会得到NaN，无法实现删除最后一个字符的效果。

修复后的key_type函数 #

function key_type(event) {
  buttonElement = document.getElementById('input').value;
  // 使用event.key获取按键名称
  if (event.key === 'Backspace') {
    if (buttonElement !== '') {
      // 正确截断字符串，删除最后一个字符
      buttonElement = buttonElement.slice(0, -1);
      document.getElementById('input').value = buttonElement;
    }
  }
  if (event.key === 'Enter') {
    equal();
  }
}

额外优化说明 #

• 处理Backspace时，需要同步更新输入框的显示内容，否则输入框的值不会跟随buttonElement变化
• 建议给buttonElement添加let声明，避免全局变量污染
• showtype函数中需要同步更新buttonElement，避免输入框显示与变量值不一致

完整修复后的核心代码片段 #

<input id="input" placeholder="Ex - 1+3" onkeyup="key_type(event)">
<script>
let buttonElement = ''; // 添加let声明
function equal() {
  document.getElementById('input').value = eval(buttonElement);
  buttonElement = eval(buttonElement);
}
function showtype(char) {
  document.getElementById('input').value += char;
  buttonElement += char; // 同步更新buttonElement
}
function key_type(event) {
  buttonElement = document.getElementById('input').value;
  if (event.key === 'Backspace') {
    if (buttonElement !== '') {
      buttonElement = buttonElement.slice(0, -1);
      document.getElementById('input').value = buttonElement;
    }
  }
  if (event.key === 'Enter') {
    equal();
  }
}
function backspace(cut) {
  if (cut === 'all') {
    document.getElementById('input').value = '';
    buttonElement = '';
  } else if (cut === '1') {
    const str = document.getElementById('input').value;
    const modify_str = str.substring(0, str.length - 1);
    document.getElementById('input').value = modify_str;
    buttonElement = modify_str; // 直接赋值修改后的字符串
  }
}    
</script>

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