Svelte中如何向绑定的p标签追加非数字字符并清空绑定元素

• 混淆了DOM引用和响应式状态的作用：你通过bind:this={displayobj}绑定后，displayobj的值是<p>标签的原生DOM对象，不是用来存储显示内容的变量。你清空时将它赋值为0后，后续调用DOM专属的append方法时，数字类型不存在该方法，自然会触发报错导致逻辑冻结。
• 非数字符号传参语法错误：displayobj.append(*)中的*没有加引号，会被JS解析为乘法运算符而非字符串值，属于基础语法错误，所以IDE会标记红色波浪线。
• 事件绑定逻辑错误：你直接写on:click={displayobj.append(9)}会在组件渲染时就立即执行append方法，而非点击触发，之前数字功能能运行属于巧合。

Svelte是声明式框架，不需要手动操作DOM修改内容，直接用响应式变量托管显示内容即可：
首先是<script>部分代码：

<script>
// 响应式变量，存储显示屏内容
let displayContent = '0'

// 清空功能
function clear() {
  displayContent = '0'
}

// 统一追加内容的方法，支持数字和符号
function append(content) {
  // 初始状态为0时，输入数字直接替换0，避免出现0123这种格式
  if (displayContent === '0' && !['+', '-', '*', '/'].includes(content)) {
    displayContent = content.toString()
    return
  }
  displayContent += content.toString()
}
</script>

然后是显示屏元素代码，直接插值绑定响应式变量即可，无需绑定DOM引用：

<p id="display">{displayContent}</p>

最后是按钮代码：

<!-- 数字按钮 -->
<button class="button" on:click={() => append(9)}>9</button>
<!-- 符号按钮，传入带引号的字符串 -->
<button class="button" on:click={() => append('*')}>*</button>
<!-- 清空按钮 -->
<button class="button" on:click={clear}>Clear</button>

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