title: Onclick function not called when its inside a load event listener
body: <p>I want to make sure my javascript work only after all content is loaded. So, I put my code inside a load event listener. If I create a function inside that event, and try to call it in a onclick event, in a button, I got a error saying my function is not defined.</p>
  
  <p><strong>Error: Uncaught ReferenceError: sayHello is not defined
      at HTMLButtonElement.onclick</strong></p>
  
  <p>If I remove the function from the load event, it works. Why this happens?</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script src="/js/index.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;button onclick="sayHello()"&gt;Say Hello&lt;/button&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>window.addEventListener("load", async () =&gt; {
  
      function sayHello(){
          alert("Hello!");
      }
  
  });
  </code></pre>