JavaScript getElementByID() ne fonctionne pas

Pourquoi refButton obtient null dans le code JavaScript suivant?JavaScript getElementByID() ne fonctionne pas

<html> 
<head> 
    <title></title> 
    <script type="text/javascript"> 
     var refButton = document.getElementById("btnButton"); 

     refButton.onclick = function() { 
      alert('I am clicked!'); 
     }; 
    </script> 
</head> 
<body> 
    <form id="form1"> 
    <div> 
     <input id="btnButton" type="button" value="Click me"/> 
    </div> 
    </form> 
</body> 
</html>

Source

2009-12-02 anonymous

Au point que vous appelez votre fonction, le reste de la page n'a pas rendu et si l'élément n'est pas dans l'existence à ce point. Essayez d'appeler votre fonction sur window.onload peut-être. Quelque chose comme ceci:

<html> 
<head> 
    <title></title> 
    <script type="text/javascript"> 
     window.onload = function(){ 
      var refButton = document.getElementById("btnButton"); 

      refButton.onclick = function() { 
       alert('I am clicked!'); 
      } 
     }; 
    </script> 
</head> 
<body> 
    <form id="form1"> 
    <div> 
     <input id="btnButton" type="button" value="Click me"/> 
    </div> 
    </form> 
</body> 
</html>

Source

2009-12-02 00:28:43 jaywon

Ou envisagez d'utiliser Prototype, JQuery ou un autre package pour gérer l'événement DOM ready. –

Je ne pense pas qu'il a besoin d'importer une bibliothèque entière juste pour l'événement DOM prêt. ;) –

@Paul - bon point. @JMSA L'événement DOM ready se déclenche AVANT que toutes les images soient téléchargées et APRÈS tous les scripts et que la page a été téléchargée. Par conséquent, l'événement DOM ready se déclenche avant l'événement window.onload. :) – jaywon

Vous devez mettre le JavaScript à la fin de la balise body.

Il ne le trouve pas parce qu'il n'est pas encore dans le DOM!

Vous pouvez également envelopper dans le gestionnaire d'événements onload comme ceci:

window.onload = function() { 
var refButton = document.getElementById('btnButton'); 
refButton.onclick = function() { 
    alert('I am clicked!'); 
} 
}

Source

2009-12-02 00:28:18

Est-ce la pratique standard ou juste dans ce cas? – anonymous

La pratique standard consiste à démarrer l'exécution à partir du chargement de la page. –

Il est de pratique courante d'exécuter des scripts uniquement après la construction de l'arborescence DOM. –

Parce que lorsque le script exécute le navigateur n'a pas encore analysé le <body>, il ne sait pas qu'il ya un élément avec l'id spécifié.

Essayez ceci:

<html> 
<head> 
    <title></title> 
    <script type="text/javascript"> 
     window.onload = (function() { 
      var refButton = document.getElementById("btnButton"); 

      refButton.onclick = function() { 
       alert('Dhoor shala!'); 
      }; 
     }); 
    </script> 
    </head> 
<body> 
    <form id="form1"> 
    <div> 
     <input id="btnButton" type="button" value="Click me"/> 
    </div> 
</form> 
</body> 
</html>

Notez que vous pouvez aussi bien utiliser addEventListener au lieu de window.onload = ... pour faire exécuter cette fonction ne après que le document entier a été analysé.

Source

2009-12-02 00:32:47

window.onload ne se déclenche pas jusqu'à ce que le document entier a été analysé et tous les fichiers téléchargés – jaywon

JavaScript getElementByID() ne fonctionne pas

Répondre

Questions connexes