2

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.

7
  • ¿Dónde colocas el código JavaScript? Si haces document.querySelector en un DOM aún no listo, te devuelva null.
    – gugadev
    el 16 jun. 2016 a las 14:27
  • Ese era el problema, sin embargo si hago document.getElementById() en un archivo externo me devolvía null igualmente, el 16 jun. 2016 a las 14:48
  • El tag <script> por lo general siempre va aquí -> <script src="..."></script></body>. Justo antes del body, para evitar estos problemas y para menorar el tiempo de respuesta.
    – gugadev
    el 16 jun. 2016 a las 14:50
  • También puedes utilizar DOMContentLoaded. Revisa mi respuesta, la he actualizado.
    – gugadev
    el 16 jun. 2016 a las 14:52
  • Si la revise, funciona perfectamente.Mitsu soy nuevo preguntando! No se seleccionar respuesta correcta el 16 jun. 2016 a las 14:54

3 respuestas 3

3

EDIT: Lo que he comentado es falso; lo que realizas es correcto pero el problema debe de estar en que los elementos se cargan DESPUÉS de tu script; para comprobarlo sólo hace falta que abras la consola (F12) y verás un error de undefined o algo por el estilo. Para solucionarlo tienes varias maneras:

1. Mover el código javascript en la parte de abajo de tu página para que cargue después de la inicialización de los objetos justo antes de cerrar el body tag cómo indican aquí.

2. Utilizar el window.onload independientemente de dónde estén los scripts y colocar ahí tu declaración:

window.onload = function () {
    target.addEventListener('click', saludar, false);
}


Respuesta original: Otra manera de utilizar addEventListener seria:

var target = document.querySelector('#btn');
target.addEventListener('click',  function() { document.querySelector('#elem').innerHTML = 'Hola piti'; }, false);

Fíjate que la función se define ahí mismo!

Por lo que puedes ver en esta completísima respuesta tienes muchas posibilidades.

6
  • En el caso del código del OP, es correcto, porque saludar es una función y se hace referencia a ella.
    – gugadev
    el 16 jun. 2016 a las 14:27
  • 1
    @MitsuGarcía Tienes razón; el problema será entonces por la carga de la página. el 16 jun. 2016 a las 14:29
  • Así es, ese es el problema.
    – gugadev
    el 16 jun. 2016 a las 14:33
  • Si, doy por solucionado el tema, nos vemos por la comunidad. el 16 jun. 2016 a las 14:42
  • 1
    @UnderZero_- no olvides seleccionar la respuesta correcta. Saludos.
    – gugadev
    el 16 jun. 2016 a las 14:46
2

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="...">).

<button id="btn">Mostrar</button>
<div id="elm"></div>

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

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
});
1
  • 1
    Perfecto, muchas gracias! en cuanto el código esta en un archivo externo. el 16 jun. 2016 a las 14:39
1

El problema es que con la primera opción ejecutas el código una vez se ha cargado la página (en el evento load del window), en cambio con la segunda opción el código (el addEventListener) se ejecuta de forma inmediata.

Si el código se encuentra antes de que esté definido el botón no te va a funcionar.

Dos opciones:

Incluye tu código al final de la página, una vez que esté creado el botón.

Ejecuta el código en el evento load del window, como en la primera opción:

window.addEventListener('load', function(){
  var target = document.querySelector('#btn');
  target.addEventListener('click', saludar, false);
});

function saludar() {
  document.querySelector('#elem').innerHTML = 'Hola piti';
}
<button id="btn">mostrar</button>
<div id="elem"></div>

1
  • Correcto, mi gracias ;) el 16 jun. 2016 a las 14:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.