在加载事件监听器中未调用Onclick函数

Question

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

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

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

的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

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

 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>