Javascript: Uncaught TypeError: impossibile chiamare il metodo 'addEventListener' di null

Sto provando a fare qualcosa di abbastanza semplice, ma per il fatto che probabilmente non sono abbastanza bravo da cercare documentazione, non riesco a farlo funzionare.Javascript: Uncaught TypeError: impossibile chiamare il metodo 'addEventListener' di null

Ho un JS in linea funzionante che assomiglia a questo:

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

Per vari motivi, sto cercando di separare la JS, e questo è dove mi ha colpito un intoppo.

ho creato la seguente pagina di prova che mi dà l'errore 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>

L'unica cosa che sono stato in grado di trovare che punta a un problema del genere è che addEventListener non può funzionare con <A> ma dovrebbe gestire <IMG> (che mi va bene come ho intenzione di versare questo su alcune immagini), così ho provato ad aggiungere la seguente senza alcun risultato:

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

Grazie in anticipo per sottolineare quello che ho' sto sbagliando. Probabilmente è evidentemente ovvio, ma ho un'esperienza quasi netta con JS e sono passato per lo più da settaggio cargo quando ne avevo avuto bisogno fino ad ora.

fonte

2012-03-24 Jan

utilizzare jQuery. $ (document) .ready (function() {}); – PhillipKregg

@PhillipKregg, sento che aggiungere Jquery al mio progetto aggiungerebbe complessità e tempi di caricamento inutili. – Jan

@PhillipKregg Questo è specifico per un progetto in cui tutto è contenuto in un unico file, incluse le immagini codificate Base64, in modo che non abbia dipendenze esterne. – Jan

Il codice è nel <head> => corre prima che gli elementi sono resi, in modo document.getElementById('compute'); restituisce NULL, come MDN promessa ...

element = document.getElementById(id);
element is a reference to an Element object, or null if an element with the specified ID is not in the document.

MDN

Solutions:

Inserisci gli script nella parte inferiore della pagina.
Chiamare il codice di collegamento nell'evento di caricamento.
Utilizza la libreria jQuery ed è l'evento DOM ready.

Che cos'è l'evento jQuery ready?

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers...
...

readydocs

fonte

2012-03-24 22:24:45 gdoron

Grazie 'gdoron'! La soluzione 1 ha funzionato subito. Sono sinceramente sorpreso che sia stato così semplice e quasi intuitivo. Ora per rompere il mio codice di produzione! :) – Jan

sto affrontando lo stesso problema mentre implimentavo il grafico di morris. e ho fatto tutto questo e ancora nessuna speranza. – Abhinav

Javascript: Uncaught TypeError: impossibile chiamare il metodo 'addEventListener' di null

risposta

Problemi correlati