在加載事件監聽器中未調用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>