0

introducir la descripción de la imagen aquí

Estoy diseñando este menu y como ven, hay botones que tienen submenus, cuando le dan click al boton con el icono de menu (Las 3 barras) el menu se oculta y solo se ven los iconos del menu (Los circulos) Pero como tiene sub menus, intento hacer que cuando el menu este cerrado y le den click al elemento a que abriria un submenu ejecute tambien la funcion de JS que abre el menu entero para poder visualizarlo. El problema es que cuando le doy el addEventListener('click') este solamente funciona con el primero sub menu. Los demas es como si no les asignara el evento.

document.getElementById("open").addEventListener("click", open_menu);

function open_menu(){
    body.classList.add("body_move");
    side_menu.classList.add("menu__side_move");
}

Este es el evento y la funcion

<a href="#" class="nav__link" id="open"><i class="far fa-circle"></i> &nbsp;Servicios</a>

Y este es el elemento. Todos tienen el mismo id pero solo funciona con el primero los demas no reconocen el evento, PERO, si les pongo directo el ´onclick=('open_menu()')´ ahi si funciona. Podria usar el onclick y ponerselo a cada elemento ´a´ que lo necesite, pero no me parece una buena practica y ademas quiero saber porque es que solo ejecuta en el primero.

1 respuesta 1

3

Ok, entonces si entendí bien tu problema es que el onclick nada más funciona con el primer elemento.

Hay dos cosas aquí.

  1. No deberías usar el evento click directamente en los elementos html, es una mala práctica ya que tu código no se vuelve muy mantenible

  2. El id es único, no deberías poner el mismo para cada elemento, es igual una mala práctica. Usa una clase en vez. Entonces quedaría de esta forma:

<a href="#" class="nav__link open"><i class="far fa-circle"></i> &nbsp;Servicios</a>

Para poder hacer que cada elemento tenga este evento click debes de seleccionarlos a todos, no solo a uno, ya que al momento de hacer un getElementById('open') solo estás haciendo referencia al primer elemento que encuentre JS. Debes de escogerlos a todos. Entonces tomando en cuenta la corrección que mencioné sobre no poner el mismo id a varios elementos, para que te funcione deberás hacerlo de la siguiente forma:

const elements = document.querySelectorAll('.open');

elements.forEach((link) => {
  link.addEventListener('click', function(){
    console.log('great!!!')
  })
})

Lo que estamos haciendo aquí es que con el querySelectorAll seleccionamos todos los elementos que tengan la clase .open. Estos elementos se guardarán en un arreglo, por eso los iteramos con un forEach y a cada elemento le asignamos el evento click.

1
  • Genial, me funcionó perfectamente. Si, tampoco me gustaba la idea de tener que ponerle onclick a cada elemento. Lo habia intentado con las clases pero no sabia que debia hacer el foreach. Muchas gracias! Commented el 3 dic. 2021 a las 21:05

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.