使用type=module脚本遇问题：按钮点击功能无法触发求助

你的代码有两个核心问题导致按钮点击无响应，咱们一个个拆解：

1. 模块脚本的作用域隔离问题 #

你在index.html里给按钮用了内联onclick="showImportedMessage();"，但因为showImport.js是**type="module"**的脚本，模块内部的函数和变量默认不会暴露到全局作用域（window对象）。点击按钮时浏览器会报Uncaught ReferenceError: showImportedMessage is not defined，自然没任何响应。

2. 导入语句与导出不匹配 #

在showImport.js里你写了：

import showMessage from '/show.js';

但show.js里的default导出是字符串"Why do I need this?"，而showMessage是命名导出的函数。这就导致你导入的showMessage其实是那个字符串，不是你想要的函数——就算作用域问题解决了，调用它也会报错。

修复后的代码示例 #

调整showImport.js（修复导入+改用事件监听）

// 用命名导入获取showMessage函数
import { showMessage } from '/show.js';

// 等DOM加载完成后给按钮绑定点击事件
document.addEventListener('DOMContentLoaded', () => {
  const showBtn = document.querySelector('button');
  showBtn.addEventListener('click', showImportedMessage);
});

function showImportedMessage() {
  showMessage();
}

简化index.html（移除内联onclick）

<!doctype HTML>
<html>
<head>
  <script type="module" src="/showImport.js"></script>
</head>
<body>
  <button>Show Message</button>
</body>
</html>

show.js可以保持不变

export default "Why do I need this?";
export function showMessage() {
  alert("Hello");
}

额外说明 #

• 模块脚本的作用域隔离是ES模块的特性，它避免了全局变量污染，尽量不要把模块里的函数强行挂载到window上（虽然能实现，但不符合模块规范），用事件监听的方式更合理。
• 导入导出要严格对应：命名导出用import { 名称 } from '路径'，默认导出用import 任意名称 from '路径'，别搞混啦。

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