title: "getElementsByTagName(...)[0]" is undefined?
body: <p>I have the following code, which basically toggles through a bunch of images.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script type="text/javascript"&gt;
              var num = 1;
              img = document.getElementsByTagName("img")[0];
              hbutton = document.getElementsByTagName("h1")[0];
              hbutton.onclick = function() {
                  num += 1;
                  img.src = num + ".jpg";
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;Press Here!&lt;/h1&gt;
          &lt;img src = "1.jpg"&gt;&lt;/img&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>For some reason, when I run it, nothing happens, because of the following error as displayed by my Firebug console.</p>
  
  <pre><code>    hbutton is undefined    
  ---
      hbutton.onclick = function() {
  </code></pre>
  
  <p>When I run just the JS after the page has loaded however, it works perfectly fine!!! Why is this?</p>