点击Delete按钮报Uncaught TypeError: deleteButton is not a function错误如何解决

这个报错意味着点击按钮触发onclick事件时，浏览器在可访问的作用域内找到的deleteButton不是可执行的函数，常见触发场景如下：

• 函数名拼写错误：行内onclick属性里写的函数名，和实际定义的函数名大小写、字符拼写不一致
• 作用域不匹配：deleteButton函数定义在局部作用域（比如DOMContentLoaded回调、自定义函数内部），而行内onclick事件只能访问全局window作用域下的成员，无法获取局部函数
• 命名被覆盖：全局作用域下存在和deleteButton同名的其他值覆盖了函数定义，最常见的情况是你给某个DOM元素设置了id="deleteButton"，浏览器会自动将该DOM元素挂载到window.deleteButton上，直接覆盖你定义的同名函数

如果你要继续使用行内onclick写法 #

• 先核对函数名拼写，确保行内onclick="deleteButton()"中的函数名和定义的函数完全一致
• 如果函数定义在局部作用域，手动将函数挂载到全局window对象上，示例：

// 假设你的函数写在DOM加载完成的回调里
document.addEventListener('DOMContentLoaded', function() {
  function deleteButton() {
    // 你的删除逻辑
  }
  // 新增这行挂载到全局
  window.deleteButton = deleteButton
})

• 检查所有DOM元素的id属性，不要有和函数名重名的id，避免浏览器自动挂载覆盖函数

更推荐的优化方案：放弃行内onclick，使用事件绑定 #

这种方式完全避免全局作用域污染和命名冲突问题，示例代码如下：

<!-- 按钮HTML，不需要写onclick属性 -->
<button class="card-delete-btn">Delete</button>

// JS逻辑，通过选择器选中按钮绑定点击事件
document.querySelector('.card-delete-btn').addEventListener('click', function() {
  // 此处写删除卡片的逻辑
})

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