为何HTML中onclick调用firstFunction()提示未定义？

你遇到的Uncaught ReferenceError: firstFunction is not defined错误，核心原因是JavaScript模块的作用域隔离特性：

• 你的HTML中<script>标签设置了type="module"，这会让加载的script.js以ES模块的方式运行。
• ES模块里的变量、函数默认处于模块私有作用域，不会自动挂载到全局window对象上。
• 而HTML中onclick="firstFunction()"的调用逻辑是在全局作用域下执行的，此时全局环境中找不到firstFunction，就会抛出引用错误。

验证对比 #

如果移除<script>标签的type="module"属性，函数会自动暴露到全局作用域，onclick就能正常调用——但这只是用于验证作用域问题的临时方式，并非推荐的模块写法。

修复思路（可选） #

如果想保留ES模块的写法，有两种常见方案：

1. 弃用HTML内联onclick，在模块中通过DOM API绑定事件：

// script.js
function firstFunction() {
  console.log("Hurry");
}
document.querySelector('button').addEventListener('click', firstFunction);

2. 主动将函数挂载到全局对象（不推荐，会破坏模块封装性）：

// script.js
function firstFunction() {
  console.log("Hurry");
}
window.firstFunction = firstFunction;

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