如何通过按 html 按钮触发 Javascript 模块内的函数

Question

我有这个简单的应用程序，我试图通过按 html 按钮来触发 Javascript 模块内的功能，但它似乎什么也没做。我查看了关于同一主题的另一个主题，但似乎对我不起作用。一旦我从脚本标签中取下 type="module" ，它就会起作用，所以它可能与此有关。控制台没有给出任何错误，所以我不知道我在这里做错了什么。

index.html

<body>
    <button id="test">Click me!</button>
    <script type="module" src="/app.js"></script>
</body>

app.js

document.getElementById("test").addEventListener("click", () => {
    console.log("Hello!");
});

Answer 1

好像少了两样东西：

您的 html 文档中的导入语句和您的代码段中的导出语句，以允许有一个模块并且可以被导入。

export function yourModule() { 
  // ...
 }

<script type="module"> import {yourModule} from './app.js';
 </script>

看这个：https://jakearchibald.com/2017/es-modules-in-browsers/

此外，请检查您的浏览器是否已经支持该模块类型。

如何通过按 html 按钮触发 Javascript 模块内的函数

How to trigger a function inside Javascript module by pressing a html button

javascript

module

event-listener