title: How can I access properly the DOM within a function?
body: <p>I have a sample HTML page:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script src="test.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;button id="myButton" title="test"&gt;Test&lt;/button&gt;
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>with the correspondent JS code:</p>
  
  <pre><code>window.onload = function_onload(); 
  
  function function_onload () {
      var myButton = document.getElementById("myButton");
      myButton.addEventListener("click", function_onclick());
  }
  
  function function_onclick() {
      alert("Hello word");
  }
  </code></pre>
  
  <p>I do not understand why the variable <code>myButton</code> is <code>null</code> in this case. Should I pass the <code>window.document</code> as parameter to the <code>function_onload</code>? I already tried this but it neither works.</p>