addEventListener() devuelve null

publicado por: Anonymous

Buenas tardes, estoy intentando ejecutar una función al cargar la página, si lo hago con addEventListener me devuelve null, sin embargo la misma función con window.onload funciona perfectamente.

Ejemplo con window.onload:

function saludar() {
    document.querySelector('#elem').innerHTML = 'Hola piti';
}

window.onload = function () {
    document.querySelector('#btn').onclick = saludar;
};

Código HTML:

<button id="btn">mostrar</button>
<div id="elem" ></div>

Si lo probáis funciona perfectamente, sin embargo ahora voy hacer los mismo con el listener:

Ejemplo con addEventListener:

var target = document.querySelector('#btn');
    target.addEventListener('click', saludar, false);

function saludar() {
document.querySelector('#elem').innerHTML = 'Hola piti';
}

Veréis que en este último código devuelve null.

¿Cual es la forma correcta de hacerlo? a poder ser para ES6 y agradecería que fuese solo Javascript, nada de Frameworks ya que en jQuery u otros conozco como hacerlo.

Saludos.

solución

Es probable que tu código JS lo estés ejecutando cuando el DOM aún no está listo. Siempre es recomendable ponerlo antes del cierre del <body>, como embebido o como link (<script src="...">).

_x000D_

_x000D_

<button id="btn">Mostrar</button>_x000D_
<div id="elm"></div>_x000D_
_x000D_
<script>_x000D_
   const btn = document.querySelector('#btn');_x000D_
   btn.addEventListener('click', saludar);_x000D_
  _x000D_
   function saludar() {_x000D_
      document.querySelector('#elm').innerText = 'Hola'; _x000D_
   }_x000D_
</script>

_x000D_

_x000D_

_x000D_

O con ES6:

btn.addEventListener('click', (e) => {
    document.querySelector('#elm').innerText = 'Hola';
});

También puedes utilizar el evento DOMContentLoaded para ejecutar una acción en cuando se cargue el DOM.

document.addEventListener('DOMContentLoaded', () => {
    // aquí todo tu código
});
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *