let btn = [...document.querySelectorAll(".box__btn-resp")]; btn.forEach((e, i) => {if (e[i].onclick) { e[i].style.borderBottom = "solid blue";});Estoy haciendo una prueba y me gustaría que cuando el jugador haga clic en una de las cuatro opciones, tenga un borde inferior azul. Intenté iterar a través de los elementos con forEach, como puede ver en el código anterior, pero no funcionó de esa manera. Podría hacer esto con addeventlistener, pero sería muy repetitivo. Sin embargo, no estoy seguro de cómo hacer que funcione de otra manera. ¿Alguien sabe cómo hacer esto sin volverse repetitivo? Gracias si puedes ayudar. Estoy usando Google Translate, así que lo siento si hay algún error.
¿Por qué repetitivo?
const btns = [...document.querySelectorAll(".box__btn-resp")]; btns.forEach(btn => btn.onclick = e => { btns.forEach(_btn => _btn.style.borderBottom = "1px solid #333") e.target.style.borderBottom = "solid blue" }) <button class="box__btn-resp">Click</button> <button class="box__btn-resp">Click</button> <button class="box__btn-resp">Click</button> <button class="box__btn-resp">Click</button> <button class="box__btn-resp">Click</button>Hola es esto lo que buscas? Esto tomará el botón en el que se hizo clic y agregará un borde inferior.
Único
var elem = document.getElementById("btn"); elem.addEventListener('click', function() { elem.style.borderBottom = "thick solid #0000FF"; }); <button id="btn">hello</button>Múltiple
var elements = document.getElementsByTagName('button'); for(var x=0; x<elements.length; x++) { elements[x].addEventListener('click', function() { for(var z=0; z<elements.length; z++) { elements[z].style.borderBottom = "thick solid #0000FF"; } }); } <button>Item 1</button> <button>Item 2</button> <button>Item 3</button> <button>Item 4</button>