Javascript: UnEdge TypeError: no se puede llamar al método 'addEventListener' nulo

Estoy tratando de hacer algo bastante simple, pero como probablemente no soy lo suficientemente bueno para buscar documentación, no puedo hacer que funcione.Javascript: UnEdge TypeError: no se puede llamar al método 'addEventListener' nulo

que tienen una línea JS funcionamiento que tiene este aspecto:

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

Por diversas razones, estoy tratando de separar la JS, y aquí es donde me golpeó con un obstáculo.

He creado la página de prueba después de que me da el error 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>

La única cosa que he podido encontrar que apunta a un problema como ese es que no se puede trabajar addEventListener con <A> pero debe manejar <IMG> (que me va muy bien como voy a verter esto en algunas imágenes), así que traté de añadir lo siguiente en vano:

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

Gracias de antemano por señalar lo que yo' estoy haciendo mal Es probablemente obvio, pero tengo una experiencia casi nula con JS y me he dedicado principalmente al cultivo de carga cuando lo necesitaba hasta ahora.

Fuente

2012-03-24 Jan

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

@PhillipKregg, siento que agregar Jquery a mi proyecto agregaría complejidad innecesaria y tiempos de carga. – Jan

@PhillipKregg Esto es específicamente para un proyecto donde todo está contenido en un archivo, incluidas las imágenes codificadas en base64, para que no tenga dependencias externas. – Jan

Su código se encuentra en la <head> => corre antes de que los elementos se representan, por lo document.getElementById('compute'); vuelve nula, como MDN promesa ...

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

Soluciones:

Coloque los scripts en la parte inferior de la página.
Llamar al código adjunto en el evento de carga.
Utilice la biblioteca jQuery y su evento DOM ready.

¿Qué es el 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

Fuente

2012-03-24 22:24:45 gdoron

Gracias 'gdoron'! La solución 1 funcionó desde el principio. Honestamente, me sorprende que fuera así de simple y casi intuitivo. ¡Ahora a romper mi código de producción! :) – Jan

estoy enfrentando el mismo problema mientras implico el gráfico de morris. y he hecho todo esto y todavía no hay esperanza. – Abhinav

Javascript: UnEdge TypeError: no se puede llamar al método 'addEventListener' nulo

Respuesta

Cuestiones relacionadas