JavaScript: Uncaught TypeError: Die Methode 'addEventListener' von null kann nicht aufgerufen werden

Ich versuche, etwas zu tun, ziemlich einfach, aber der Grund für mich wahrscheinlich nicht gut genug, um zu suchen, Dokumentation, ich kann nicht ankommen dieses zu wirken.

Habe ich wieder eine funktionierende inline-JS, das sieht so aus:

<A title="Wolfram IP Calc" href="javascript:txt=prompt('Enter%20IP%20address,%20e.g.%2010.20.30.40/29','1.2.3.4/5');%20if(txt)%20window.open('http://www.wolframalpha.com/input/?i='+txt);void(O);">Compute!</A>

Aus verschiedenen Gründen, versuche ich Sie zu trennen, die JS, und das ist, wo ich traf einen Haken.

Habe ich die folgenden test-Seite, die gibt mir die Fehlermeldung Uncaught TypeError: Cannot call method 'addEventListener' of null:

<HTML> <HEAD profile="http://www.w3.org/2005/10/profile"> <script type="text/javascript">
var compute = document.getElementById('compute');
compute.addEventListener('click', computeThatThing, false);

function computeThatThing() {
    txt=prompt('Enter%20IP%20address,%20e.g.%2010.20.30.40/29','1.2.3.4/5');
    if(txt) {
        window.open('http://www.wolframalpha.com/input/?i='+txt);
    }
}
</script></HEAD>
<BODY>
<A title="Wolfram IP Calc" id="compute" href="javascript:void(O);">Test</A>
</BODY>
</HTML>

Das einzige, was ich habe finden können, weist auf ein problem ist, dass addEventListener arbeiten nicht <A> sollte aber Griff <IMG> (was mir gut gefällt, wie ich Gießen werde dies auf einigen Bildern), also habe ich versucht, indem Sie den folgenden ohne Erfolg:

<img id="compute" src="http://products.wolframalpha.com/images/products/products-wa.png" />

Vielen Dank im Voraus für den Hinweis, was ich falsch mache. Es ist wohl extrem offensichtlich, aber ich habe nahezu null Erfahrung mit JS und ich gegangen sind, meist durch Ladung culting, wenn ich brauchte es bis jetzt.

InformationsquelleAutor der Frage Jan | 2012-03-24

  1. 54

    Dein code ist in der <head> => wird ausgeführt, bevor die Elemente dargestellt werden, so document.getElementById('compute'); gibt null zurück, als MDN Versprechen...

    element = document.getElementById(id);

    element ist eine Referenz auf ein Element-Objekt, oder null, falls ein element mit der angegebenen ID ist nicht in das Dokument.

    MDN

    Lösungen:

    1. Legen Sie die Skripte in der Seite unten.
    2. Rufen Sie die attach-code im load-Ereignis.
    3. Verwendung der jQuery-Bibliothek und es ist DOM-ready-event.

    Was ist das jQuery - ready Veranstaltung?

    Während JavaScript bietet das load-Ereignis für das ausführen von code, wenn eine Seite gerendert wird, wird dieses Ereignis nicht ausgelöst werden, bis alle Elemente, wie Bilder wurden vollständig erhalten. In den meisten Fällen, wird das Skript ausgeführt werden kann, sobald der DOM-Hierarchie bereits vollständig angelegt. Die handler übergeben .ready() garantiert ausgeführt, wenn der DOM fertig ist, so ist dies in der Regel der beste Ort, um fügen Sie alle anderen event-Handler...

    ...

    ready docs

    InformationsquelleAutor der Antwort gdoron

Schreibe einen Kommentar