“getElementsByTagName(...)[0]” n'est pas défini?

J'ai le code suivant, qui en gros permet de parcourir un tas d'images.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            var num = 1;
            img = document.getElementsByTagName("img")[0];
            hbutton = document.getElementsByTagName("h1")[0];
            hbutton.onclick = function() {
                num += 1;
                img.src = num + ".jpg";
            }
        </script>
    </head>
    <body>
        <h1>Press Here!</h1>
        <img src = "1.jpg"></img>
    </body>
</html>

Pour une raison quelconque, quand je le lance, rien ne se passe, en raison de l'erreur suivante est affichée par ma console Firebug.

    hbutton is undefined    
---
    hbutton.onclick = function() {

Quand je lance juste le JS fois la page chargée, cependant, il fonctionne parfaitement bien!!! Pourquoi est-ce?

Ce n'est pas bizarre, c'est prévu... j'ai mis à jour le titre avec de vrais symptômes. Cherchez les questions relatives à getElementById et undefined. C'est la même idée.
Oups, c'est légèrement différent avec getElementById (voir "getElementById null"). Dans ce cas, il n'est pas défini car getElementsByTagName renvoie un tableau vide [comme] objet emptyArray[0] résultats dans undefined. En tout cas, voir d'autres question.
double possible de getElementById() renvoie null même si l'élément existe
Double Possible de Pourquoi jQuery ou une méthode DOM comme getElementById pas de trouver l'élément?

OriginalL'auteur Bobby Tables | 2012-05-29