基于Web的计算器中'C'按钮为何追加内容而非清空？

问题根源 #

你的HTML代码里，C按钮的文本写的是<button> C </button>，前后带有空格。这导致clicked_button.textContent获取到的实际内容是' C '（包含前后空白字符），和你判断条件里的'C'完全不匹配，所以清空逻辑没触发，反而执行了else分支的追加操作。

解决方案 #

有两种简单的修复方式：

方式1：修正HTML中的按钮文本

直接去掉C按钮文本的前后空格：

<button id="eraser">C</button>

方式2：在TS中对文本做去空格处理

在判断前调用trim()方法去除文本的前后空白字符，这样不管HTML里有没有空格都能正常匹配：

const buttons = document.getElementById('buttons')
const input_field = document.querySelector('input[type="text"]') as HTMLInputElement

buttons?.addEventListener('click', function(event) {
  const clicked_button = event.target as HTMLElement
  if (clicked_button.tagName === 'BUTTON') {
    const btnText = clicked_button.textContent?.trim() || ''
    if (btnText === 'C') {
      input_field.value = ''
    } 
    else {
      input_field.value += btnText
    }
  }
})

额外提示 #

其他按钮的文本也存在前后空格的问题，比如<button> 7 </button>，虽然当前不影响功能，但建议统一去掉空格或者使用trim()处理，避免后续出现类似的匹配问题。

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