Javascript: Impossible d'obtenir un élément à l'aide de getElementById

D'accord. J'ai besoin de nouveaux yeux parce que je suis encore sur ce problème pendant une heure!

Voici mon code HTML simple (testssio.html) qui inclut le script javascript:

<!DOCTYPE html> <html> <head> <script type="text/javascript"> var ssio = document.getElementById('ssio'); ssio.html = "it finally works!"; </script> </head> <body> <div id="ssio"></div> </body> </html>

Mais ça ne marche pas! En utilisant le débogueur, je reçois:

 Uncaught TypeError: Cannot set property 'html' of null /testssio/:6

Est-ce que quelqu'un l'obtient? Je sais que ce n'est pas l'endroit correct pour chercher de l'aide au débogage, mais je serai fou si je ne l'ai pas compris. Alors, s'il vous plaît, une aide?

Tahnks à l'avance.

La raison en est que les scripts dans la charge avant la page sont rendus. Cela signifie que votre contenu n'est pas encore rendu et ne fait donc pas partie du document .

Si vous souhaitez voir ce travail, essayez de déplacer votre script en dessous de l'élément rend, comme ceci:

 <!DOCTYPE html> <html> <head> </head> <body> <div id="ssio"></div> <script type="text/javascript"> var ssio = document.getElementById('ssio'); ssio.innerHTML = "it finally works!"; </script> </body> </html>

Une façon plus standardisée de faire ceci est avec les événements. Beaucoup de gens utilisent jQuery, mais cela peut se faire avec js simple. Cela implique de changer votre script comme ceci:

 <script type="text/javascript"> function WinLoad(){ var ssio = document.getElementById('ssio'); ssio.innerHTML = "it finally works!"; } window.onload=WinLoad; </script>

De cette façon, vous pouvez toujours le laisser dans <head> .

De plus, l'utilisation de .html provient de jQuery . Il est généralement utilisé comme .html(content) . Si vous souhaitez utiliser la version javascript simple, utilisez .innerHTML = content .

Je mentionne jQuery tellement parce que c'est une API hautement utilisée. Cette citation provient de leur site:

"JQuery est une bibliothèque JavaScript rapide et concise qui simplifie les interactions du document HTML, de la gestion des événements, de l'animation et de l'Ajax pour un développement Web rapide. JQuery est conçu pour changer la façon dont vous écrivez JavaScript."

Il y a deux erreurs ici. Tout d'abord, vous devez placer la balise SCRIPT après l'élément. Deuxièmement, ce n'est pas .html, mais .innerHTML. Voici donc le code corrigé:

 <!DOCTYPE html> <html> <head> </head> <body> <div id="ssio"></div> <script type="text/javascript"> var ssio = document.getElementById('ssio'); ssio.innerHTML = "it finally works!"; </script> </body> </html>

Votre code fonctionne trop tôt avant que le DOM ne soit chargé et, par conséquent, document.getElementById() ne trouve pas encore l'élément dans le document.

Vous pouvez déplacer votre étiquette de script vers le bas avant la </body> ou vous pouvez attendre que le DOM soit chargé avant d'exécuter votre code avec l'événement de chargement de la fenêtre ou un événement DOMReady.

Vous pouvez utiliser quelque chose comme ça

  <!DOCTYPE html> <html> <head> <script type="text/javascript"> document.onload= function(){ var ssio = document.getElementById('ssio'); ssio.html = "it finally works!"; } </script> </head> <body> <div id="ssio"></div>