在HTML中调用外部JS文件函数失效问题求助（StackBlitz环境）

你的问题出在<script>标签的type="module"属性上：ES模块（即type为module的脚本）拥有独立的作用域，模块内定义的change函数不会自动暴露到全局作用域中，而HTML里的onclick="change()"是在全局作用域里查找这个函数，所以点击按钮时找不到对应的函数，自然没有反应。

这里提供两种可行的解决方式：

方式一：移除模块类型，让脚本全局执行 #

修改index.html中的<script>标签，去掉type="module"属性：

<script src="script.js"></script>

这样script.js会作为普通脚本运行，change函数会被挂载到全局的window对象上，onclick="change()"就能正常调用它。

方式二：保留模块类型，改用事件监听绑定点击 #

这种方式更符合现代JS的开发规范，不需要依赖全局作用域：

1. 修改index.html中的按钮，移除onclick属性：

<button>Change Words</button>

2. 修改script.js，使用事件监听绑定点击逻辑：

// 确保DOM加载完成后再操作元素
document.addEventListener('DOMContentLoaded', () => {
  const changeButton = document.querySelector('button');
  changeButton.addEventListener('click', () => {
    document.getElementById("words").innerText = 'Words Have Been Changed';
  });
});

这样模块内的逻辑会在DOM加载完成后绑定到按钮上，点击就能正常触发文本修改。

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