web-dev-qa-db-fra.com

Pourquoi document.GetElementById renvoie null

J'ai utilisé document.GetElementById avec succès, mais depuis un certain temps, je ne peux plus le faire fonctionner. Les anciennes pages dans lesquelles je l'utilisais fonctionnent toujours mais les choses sont aussi simples que cela:

<html>
<head>
 <title>no title</title> 
 <script type="text/javascript">
 document.getElementById("ThisWillBeNull").innerHTML = "Why is this null?";
 </script>
</head>
<body>
 <div id="ThisWillBeNull"></div>
</body>
</html>

Me donne "document.getElementById (" parsedOutput ") est null" tout le temps maintenant. Peu importe si j'utilise Firefox ou Chrome ou les extensions que j'ai activées ou quels en-têtes j'utilise pour le html, c'est toujours nul et je ne trouve pas ce qui pourrait être faux.

Merci pour votre contribution =)

javascriptgetelementbyid
21
BadDayComing

La page est rendue de haut en bas. Votre code s'exécute immédiatement après son analyse. Au moment de l'exécution, la div n'existe pas encore. Vous devez l'envelopper dans une fonction window.onload.

45
steve_c

Essaye ça:

 <script type="text/javascript">
  window.onload = function() {
   document.getElementById("ThisWillBeNull").innerHTML = "Why is this null?";
  }
 </script>
28
Sarfraz

Sans window.onload votre script n'est jamais invoqué. Javascript est un langage basé sur les événements, donc sans événement explicite comme onload, onclick, onmouseover, les scripts ne sont pas exécutés.

<script type="text/javascript">  
  window.onload = function(){  
   document.getElementById("ThisWillBeNull").innerHTML = "Why is this null?";  
  }
</script>

Événement de chargement:

L'événement de chargement se déclenche à la fin du processus de chargement du document. À ce stade, tous les objets du document se trouvent dans le DOM et toutes les images et sous-cadres ont fini de se charger.

https://developer.mozilla.org/en/DOM/window.onload

8
Christopher Altman

Horaire.

Le document n'est pas prêt lorsque vous obtenez l'élément.

Vous devez attendre que le document soit prêt , avant de récupérer l'élément.

4
Cheeso

Le navigateur va exécuter ce script dès qu'il le trouvera. À ce stade, le reste du document n'a pas encore été chargé - il n'y a pas encore d'élément avec cet identifiant. Si vous exécutez ce code après cette partie du document est chargée, cela fonctionnera correctement.

2
Syntactic
<script type="text/javascript">
  window.onload += function() {
   document.getElementById("ThisWillBeNull").innerHTML = "Why is this null?";
  }
 </script>

Utilisation += pour affecter plus de eventHandlers à l'événement onload du document.

0
Tarik