hola, estoy luchando por usar JS para hacer que los botones en mi página HTML agreguen un borde al botón cuando se hace clic en él y eliminar el borde cuando se hace clic nuevamente. funciona durante los primeros 2 clics, pero luego ya no hace nada. disculpe mi js, soy extremadamente inexperto.
JavaScript:
<script> var flag = true; var buttons = document.getElementsByClassName("btn"); function buttonFunction() { if (flag) { for (var i = 0; i < buttons.length; i++) { document.getElementsByClassName("btn")[i].addEventListener("click", function() { this.classList.add("buttonSelect"); flag = false return }); } } else { if (flag == false) { for (var i = 0; i < buttons.length; i++) { document.getElementsByClassName("btn")[i].addEventListener("click", function() { this.classList.add("buttonUnselect"); flag = true return }); } } } } </script>El verdadero problema es que está agregando ambas clases y nunca las elimina. Deshágase de la declaración if else y simplemente cambie la clase al hacer clic. Tampoco es necesario envolver el bucle en una función. Simplemente deje que javascript ejecute los detectores de eventos en tiempo de ejecución.
Además, utilice los buttons var que creó en lugar de intentar consultar el DOM nuevamente para los mismos elementos.
<script> var buttons = document.getElementsByClassName("btn"); for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", function() { this.classList.toggle("buttonSelect"); }) } </script>