Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: UsuarioZ en 17 Junio 2022, 22:13 pm



Título: Error con JS
Publicado por: UsuarioZ en 17 Junio 2022, 22:13 pm
Hola, estoy intentando agregar otra funcionalidad a una pagina (un menu de hamburguesa), pero cuando agrego el event listener deja de funcionar otra de las funcionalidades (una funcionalidad que se muestra al activar un boton radio), porque puede ser?

Error:
Código:
TypeError: Cannot read properties of null (reading 'addEventListener')

Codigo de los event listener:
Código
  1. function eventListeners(){
  2.    const mobileMenu = document.querySelector('.mobile-menu');
  3.    mobileMenu.addEventListener('click', navegacionResponsive);
  4.  
  5.    const precioOferta = document.querySelectorAll('input[name="producto[oferta]"]');
  6.    precioOferta.forEach(input => input.addEventListener('click', mostrarCajaPrecioOferta));
  7. }
  8.  

Si dejo comentadas las dos líneas de arriba del bloque empieza a funcionar normalmente pero obviamente pierdo la nueva funcionalidad que implemente.

Gracias de antemano, saludos.

--------------------

Solucionado al chequear si no es NULL el resultado del querySelector, no sabia muy bien como funcionaba y pasaba cuando cargaba HTML que no incluía esa clase o atributo.

Código
  1. function eventListeners(){
  2.    const mobileMenu = document.querySelector('.mobile-menu');
  3.    if(mobileMenu != null){
  4.        mobileMenu.addEventListener('click', navegacionResponsive);
  5.    }
  6.    const precioOferta = document.querySelectorAll('input[name="producto[oferta]"]');
  7.    if(precioOferta != null){
  8.        precioOferta.forEach(input => input.addEventListener('click', mostrarCajaPrecioOferta));
  9.    }
  10. }
  11.  

----

Otra posible solución por si alguien que lee el post tiene el mismo problema y lo anterior no funciona:

Código
  1. /*Ejecuta el codigo dentro de function(){} una vez que el HTML esta completamente cargado.*/
  2. document.addEventListener('DOMContentLoaded', function (){
  3.    eventListeners();
  4. });



Título: Re: Error con JS
Publicado por: Danielㅤ en 18 Junio 2022, 01:09 am
Hola, nos alegramos de que hayas podido solucionar el problema y te agradecemos por dejar la solución :D


Saludos


Título: Re: Error con JS
Publicado por: UsuarioZ en 20 Junio 2022, 19:25 pm
Hola, nos alegramos de que hayas podido solucionar el problema y te agradecemos por dejar la solución :D


Saludos

Gracias, espero que le sirva a alguien si lee el post y tiene el mismo error, saludos.