javascript - read - addeventlistener jquery
Javascript: TypeError no detectado: no se puede llamar al método ''addEventListener'' de null (1)
Su código está en las ejecuciones <head> => antes de que los elementos se procesen, entonces document.getElementById(''compute''); devuelve nulo, como promete MDN ...
element = document.getElementById (id);
elemento es una referencia a un objeto Elemento, o nulo si un elemento con la ID especificada no está en el documento.
Soluciones:
- Coloque los guiones en la parte inferior de la página.
- Llame al código adjunto en el evento de carga.
- Use la biblioteca jQuery y su evento DOM ready.
¿Cuál es el evento jQuery ready ?
Si bien JavaScript proporciona el evento de carga para ejecutar el código cuando se procesa una página, este evento no se desencadena hasta que todos los activos, como las imágenes, se hayan recibido por completo. En la mayoría de los casos, la secuencia de comandos se puede ejecutar tan pronto como la jerarquía DOM se haya construido por completo. Se garantiza que el controlador pasado a .ready () se ejecutará después de que el DOM esté listo, por lo que este suele ser el mejor lugar para adjuntar todos los demás controladores de eventos ...
...
docs ready
Intento hacer algo bastante simple, pero debido a que probablemente no soy lo suficientemente bueno para buscar documentación, no puedo hacer que esto funcione.
Tengo un JS en línea en funcionamiento que se ve así:
<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 varias razones, estoy tratando de separar el JS, y aquí es donde me toco un inconveniente.
Creé la siguiente página de prueba 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>
Lo único que he podido encontrar que apunta a un problema como ese es que addEventListener no puede funcionar con <A> pero debe manejar <IMG> (lo cual me viene bien ya que voy a verter esto en algunas imágenes ), así que intenté agregar 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 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.