0
156
VistasCómo eliminar la clase del Botón 1 al hacer clic en el Botón 2 - Vanilla JS
Estoy tratando de hacer un efecto de resaltado en el Botón 1 (texto en negrita y azul con una clase css). Pero, por supuesto, la clase debe eliminarse del Botón 1 cuando hago clic en otro Botón en el Menú.
let buttons = document.querySelectorAll(".ef-button"); for (let i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", function () { if (buttons[i].classList.contains("active-element")) { buttons[i].classList.remove("active-element"); } else { buttons[i].classList.add("active-element"); } }) }Esto es lo que escribí. Puedo hacer clic en cada botón para resaltarlo, pero cuando hago clic en otro botón, no elimina la clase del primer botón... De todos modos, puedo hacer clic en un botón ya resaltado para eliminar la clase nuevamente.
Lo que necesito es como un "reinicio" que elimine la clase del botón en el que hice clic.
Cuando hago clic en Botones:
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Por aquí:
para aquellos que quieren evitar buscar en el MDN Doc1
document .querySelectorAll('.ef-button') .forEach( (btClickEv,_,buttons) => { btClickEv.onclick = () => buttons.forEach(bt=>bt.classList.toggle('active-element',bt===btClickEv)) }) .ef-button { background : pink; } .active-element { background : green; } <button class="ef-button"> bt1 </button> <button class="ef-button"> bt2 </button> <button class="ef-button"> bt3 </button> <button class="ef-button"> bt4 </button> <button class="ef-button"> bt4 </button>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta