HTML表单onsubmit事件调用async异步函数报错如何修复

你当前的报错由ES模块作用域规则导致：引入脚本时设置了type="module"，ES模块内声明的函数、变量默认仅在模块内部作用域生效，不会挂载到全局window对象。而HTML行内事件属性（如onsubmit）的执行上下文为全局作用域，无法访问模块内部的addItem函数，最终触发函数未定义的引用错误。
注意：该报错和addItem是async异步函数无关，异步函数本身不会导致事件绑定失效

以下两种方案二选一即可，优先推荐第一种规范写法。

方案1：改用addEventListener绑定事件（推荐） #

这种写法无需暴露全局函数，符合前端开发规范，操作步骤：

• 修改HTML中的表单标签，移除行内onsubmit属性，为表单添加id方便JS选中，修改后表单代码如下：

<form id="todo-form">
    <input id="todo-input" type="text" placeholder="Create a new todo...">
</form>

• 在JS文件末尾添加事件绑定代码，你原有写好的addItem异步函数逻辑不需要做任何改动：

document.addEventListener('DOMContentLoaded', () => {
    const todoForm = document.getElementById('todo-form');
    todoForm.addEventListener('submit', addItem);
});

方案2：手动暴露函数到全局作用域（仅临时修复用） #

如果暂时不想调整HTML结构，可以直接在JS文件末尾添加一行代码，将函数挂载到全局对象上，让行内事件可以找到该函数：

window.addItem = addItem;

该方案会污染全局命名空间，容易引发变量名冲突，正式项目不建议使用。

内容的提问来源于stack exchange，提问作者Mr. 17