title: External JS with onLoad Event
body: <p>I have an external js file which has a function that is meant to run AFTER the document body has loaded. This is what I have so far but it's not working as it should. Some help please.</p>
  
  <p><strong>External JS File</strong></p>
  
  <pre><code>window.document.body.addEventListener('load', numOfSelects());
  
  function numOfSelects()
  {
    var selects = document.getElementsByTagName('select');
    alert(selects.length);
  }
  </code></pre>
  
  <p>The HTML file that calls this script does have a few select fields. The alert works but it shows 0. And after the alert shows then the body can be seen loaded. Obviously this is not what I wanted. What am I doing wrong? Thanks guys.</p>
  
  <p>I have also tried this:</p>
  
  <p>Still didn't work. Here's my code:</p>
  
  <p><strong>Parent File</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;File 1&lt;/title&gt;
  &lt;script src='file1.js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;select id='dd1'&gt;&lt;option&gt;First&lt;/option&gt;&lt;option&gt;Second&lt;/option&gt;&lt;/select&gt;
  &lt;select id='dd2'&gt;&lt;option&gt;First&lt;/option&gt;&lt;option&gt;Second&lt;/option&gt;&lt;/select&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>JS FILE</strong></p>
  
  <pre><code>alert('start');
  window.document.body.addEventListener('load', function(){alert(document.getElementsByTagName('select').length)}); 
  alert('stop');
  </code></pre>
  
  <p>only the first alert shows. I feel like I have made a really silly error somewhere.</p>