Une erreur de débutant en JavaScript
Une erreur que tout le monde à du faire en JavaScript et qui est particulièrement bête :
...
<head>
<script>
alert(document.getElementById('boite'));
</script>
</head>
<body>
<div id="boite"></div>
...
C'est déconcertant, une seule ligne de JavaScript et elle ne marche pas (le message affiché est 'null' au lieu de '[object HTMLDivElement]').
L'explication est très simple : ici le JavaScript est exécuté avant que l'élément identifié par 'boite' ne soit chargé dans le navigateur. En gros le navigateur reçoit le code JavaScript et l'interprète immédiatement, sans attendre que la page ne soit chargée.
Il y a des alternatives bien sûr, et les voici :
- Solution 1 :
... <body> <div id="boite"></div> <script> alert(document.getElementById('boite')); </script> ...Pas de problème, le JavaScript sera interprété après que le navigateur ait reçu l'élément (ou plutôt qu'il l'ait affiché).
Mais cela n'est pas très propre, on se retrouve avec du JavaScript en plein milieu d'une page. - Solution 2 :
... <head> <script> function init() { alert(document.getElementById('boite')); } </script> </head> <body> <div id="boite"></div> <script> init(); </script> ...Ici c'est pareil, cela fonctionnera. Mais on se retrouve également avec du JavaScript en plein milieu de la page. Certes c'est juste un appel de fonction, et cela permet de mettre son JavaScript dans un fichier séparé.
- Solution 3 :
... <head> <script> function init() { alert(document.getElementById('boite')); } if(document.addEventListener){ document.addEventListener("DOMContentLoaded", init, false); // for Mozilla document.addEventListener("load", init, false); // for other good browsers } else window.onload = init; // for IE </script> </head> <body> <div id="boite"></div> ...C'est déjà mieux n'est-ce pas ? document.addEventListener est l'équivalent DOM du window.onload, mais IE ne le supporte pas. Il faut donc vérifier que la fonction est utilisable par le navigateur et adapter en fonction.
Le paramètre "load" correspond à l'évènement à surveiller. Ici le chargement de la page.
La variante "DOMContentLoaded" permet de surveiller la fin du chargement du DOM (oui, donc de la page).
Le paramètre init correspond à la fonction à appeler une fois l'évènement déclenché.
Quand au troisième paramètre je vous recommande de lire cette page pour en apprendre plus. Si vous ne voulez pas vous embêter avec mettez le à false.
Merci à Country pour l'astuce finale.
Commentaires
On peut très bien faire un alert() dans le <head>, c'est même plus propre de le faire là plutôt que dans le <body> (sémantiquement parlant) 
.
Laissez le vôtre !
Les commentaires pour ce billet sont fermés.
C'est loin d'être déconcertant c'est juste qu'on ne fait pas d'alerte dans un <head>... mais dans un <body>