Question

我想确保仅在加载所有内容后我的JavaScript才能运行。因此，我将代码放入了加载事件监听器中。如果我在该事件内创建一个函数，然后尝试在一个按钮上的onclick事件中调用它，则会收到一条错误消息，提示未定义我的函数。

错误：未捕获ReferenceError：未定义sayHello 在HTMLButtonElement.onclick

如果我从加载事件中删除了该函数，则它将起作用。为什么会这样？

index.html

<html>
<head>
    <script src="/js/index.js"></script>
</head>
<body>

    <button onclick="sayHello()">Say Hello</button>

</body>
</html>

index.js

window.addEventListener("load", async () => {

    function sayHello(){
        alert("Hello!");
    }

});

Answer 1

像这样尝试。在此模型中，在触发click事件之前，我们不会分配DOMContentLoaded函数。

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('.sayHello').addEventListener('click', () => console.log('Hi'))
});

<html>
<head>
    <script src="/js/index.js"></script>
</head>
<body>
    <button class="sayHello">Say Hello</button>
</body>
</html>