Javascript: Uncaught TypeError: imansible chiamare il metodo ‘addEventListener’ di null

Sto cercando di fare qualcosa di abbastanza semplice, ma per il motivo per cui probabilmente non sono abbastanza bravo da cercare documentazione, non riesco a farlo funzionare.

Ho un JS in linea funzionante simile a questo:

Compute! 

Per varie ragioni, sto cercando di separare il JS, ed è qui che ho trovato un problema.

Ho creato la seguente pagina di test che mi dà l’errore Uncaught TypeError: Cannot call method 'addEventListener' of null :

    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); } }   Test   

L’unica cosa che sono stato in grado di trovare che punta a un problema del genere è che addEventListener non può funzionare con ma dovrebbe gestire (che mi sta bene come sto andando a versare questo su alcune immagini ), quindi ho provato ad aggiungere quanto segue senza alcun risultato:

  

Grazie in anticipo per aver indicato cosa sto facendo male. 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.

Il tuo codice è nell’esecuzione di => prima del rendering degli elementi, quindi document.getElementById('compute'); restituisce null, come promise MDN …

element = document.getElementById (id);
elemento è un riferimento a un object Element o null se un elemento con l’ID specificato non è nel documento.

MDN

soluzioni:

  1. Metti gli script in fondo alla pagina.
  2. Chiama il codice di collegamento nell’evento di caricamento.
  3. Usa la libreria jQuery ed è un evento pronto per DOM.

Qual è l’evento ready jQuery?

Mentre JavaScript fornisce l’evento di caricamento per l’esecuzione del codice quando viene eseguito il rendering di una pagina, questo evento non viene triggersto fino a quando tutte le risorse come le immagini non sono state completamente ricevute. Nella maggior parte dei casi, lo script può essere eseguito non appena la gerarchia DOM è stata completamente costruita. Il gestore passato a .ready () è garantito per essere eseguito dopo che il DOM è pronto, quindi questo è solitamente il posto migliore per colbind tutti gli altri gestori di eventi …

documenti ready