JavaScript getElementByID() funktioniert nicht

Warum erhält refButton im folgenden JavaScript-Code null?JavaScript getElementByID() funktioniert nicht

<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>

Quelle

2009-12-02 anonymous

An der Stelle Sie Ihre Funktion aufrufen, hat der Rest der Seite nicht gemacht und so ist das Element, in Existenz nicht an dieser Punkt. Versuchen Sie, Ihre Funktion möglicherweise auf window.onload aufzurufen. Etwas wie folgt aus:

<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>

Quelle

2009-12-02 00:28:43 jaywon

Oder verwenden Sie Prototype, JQuery oder ein anderes Paket, um das Ereignis DOM ready zu behandeln. –

Ich glaube nicht, dass er nur für das DOM-ready-Event eine ganze Bibliothek importieren muss. ;) –

@Paul - guter Punkt. @JMSA das DOM ready-Ereignis wird tatsächlich ausgelöst, BEVOR alle Bilder heruntergeladen werden und NACH alle Skripte und die Seite heruntergeladen wurde. Daher wird das Ereignis DOM ready vor dem Ereignis window.onload ausgelöst. :) – jaywon

Sie müssen die JavaScript am Ende des Body-Tag setzen.

Es findet es nicht, weil es noch nicht im DOM ist!

Sie auch in der Event-Handler onload wie diese wickeln kann:

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

Quelle

2009-12-02 00:28:18

Ist das die Standardpraxis oder nur in diesem Fall? – anonymous

Standardmäßig wird die Ausführung ab dem Zeitpunkt des Ladens der Seite gestartet. –

Es ist Standard, Skripts erst nach dem Erstellen des DOM-Baums auszuführen. –

Denn wenn das Skript führt den Browser noch nicht die <body> analysiert hat, so dass er nicht weiß, dass es ein Element mit dem angegebenen ID.

Versuchen Sie stattdessen:

<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>

Beachten Sie, dass Sie auch addEventListener statt window.onload = ... zu machen, dass Funktion nur ausgeführt werden, nachdem das gesamte Dokument analysiert wurde verwenden.

Quelle

2009-12-02 00:32:47

window.onload wird nicht ausgelöst, bis das gesamte Dokument analysiert wurde und alle Dateien heruntergeladen wurden – jaywon

JavaScript getElementByID() funktioniert nicht

Antwort

Verwandte Themen