HTML onclick调用import导入函数提示未定义的问题咨询

ES 模块默认具备独立的私有作用域，你通过 import 语法导入的 deleteClient 函数仅在当前 JS 模块内部可访问，不会自动挂载到浏览器全局 window 对象上。
而 HTML 内联 onclick 事件的回调函数执行时，会默认从全局作用域查找调用的函数，自然无法识别模块内私有作用域的函数，因此抛出未定义的报错。

这里提供两种常用方案，优先推荐第二种：

• 方案1：手动挂载到全局作用域（仅适合小型临时项目，容易造成全局变量污染）
  在你导入函数的 JS 文件中，新增一行代码将函数暴露到全局：

import {deleteClient} from './API.js';
// 新增挂载代码
window.deleteClient = deleteClient;

修改后原有 HTML 的 onclick 写法可以直接生效。

• 方案2：移除内联onclick，改用JS绑定事件（符合原生JS最佳实践）
  首先修改HTML的标签代码，移除内联onclick，新增标识和自定义属性存储参数：

<a href="#" class="delete-btn" data-client-id="31">delete</a>

再到你的JS文件中绑定点击事件：

import {deleteClient} from './API.js';

// 给所有删除按钮绑定事件
document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', (e) => {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    // 取出自定义属性里的客户ID
    const clientId = Number(btn.dataset.clientId);
    deleteClient(clientId);
  })
})

注意：如果你的JS文件是通过script标签引入到HTML的，需要给script标签添加type="module"属性，否则import语法本身会直接报错。

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