Hoy vamos a aprender cómo realizar un selector dinámico de botones que le permite a los usuarios saber cuál botón está activo actualmente. Este tutorial te permitirá repasar temas aprendidos en el curso básico de JavaScript, como variables; funciones; condicionales; colecciones y ciclos. Además, se incluirán otros temas super interesantes como la manipulación del DOM con JavaScript, HTML y CSS básicos.
Sin más dilación, ¡comencemos! 🛴
Vamos a crear una carpeta en la que almacenaremos los archivos de nuestro proyecto. No es la mejor práctica dejar los archivos “en el aire” (cada uno en la misma carpeta sin asignarle sus propios directorios) como están aquí, pero para efectos prácticos, lo haremos de esta manera. Recuerda que tu editor de código a usar puede ser el que quieras, no hay restricciones.
El primer archivo sobre el que trabajaremos, será el de HTML, que definirá la estructura de nuestro selector. Recuerda tener en cuenta que debes vincular los arhivos CSS y JS a este index. Los nombres para cada uno son libres, pero yo usé los que normalmente se consideran en los proyectos para la Web.
<!DOCTYPE html><html><head><title>Selector dinámico con JS</title><linkrel="stylesheet"href="styles.css"></head><body><h1>Selector dinámico con JS 🤖</h1><buttonclass="btn">Botón 1</button><buttonclass="btn">Botón 2</button><buttonclass="btn">Botón 3</button><scriptsrc="script.js"></script></body></html>
Ahora vamos a poner bonito nuestro selector con los estilos. Si te fijas, cada uno de los selectores que usé, hacen referencia a todos los elementos HTML de nuestro DOM. De nuevo, normalmente los estilos se suelen añadir por medio de clases o id’s. Sin embargo, al ser JavaScript nuestro foco y esta una aplicación tan sencilla, estilizaremos de esta forma.
¡Ahora si! llegó la hora de usar JavaScript. Lo que haremos primero es declarar e inicializar las variables necesarias para la funcionalidad de nuestro selector. Tendremos una constante que almacenará una colección de tipo NodeList, generada por medio del método para manipular el DOM, conocido como “querySelectorAll”. Es importante mencionar que la NodeList es parecida a los arreglos, pero no es lo mismo. Su naturaleza de colección nos permitirá iterar sobre ella más adelante. Las otras dos variables son un booleano que determina si un botón está activo y una que almacenará el botón activo actualmente.
const botones = document.querySelectorAll(".btn");
let isActive = false;
let activeBtn;
Luego crearemos una función que permitirá cambiar el color del borde que se esté seleccionando actualmente. El condicional inicial, valida si hay un botón activo. Si lo hay, se encarga de quitarle el borde que indica que está activo, para que, a través de la línea siguiente, se le pueda añadir al botón seleccionado actualmente ese borde que indica que está activo. Por último, se pasa a “true” el booleano “isActive” para indicar que en efecto hay un botón seleccionado, y luego se usa la variable “activeBtn” para almacenar el elemento HTML (botón) seleccionado actualmente en ella.
Por último, usaremos un ciclo forEach que permitirá añadirle la función creada anteriormente a cada uno de los botones que tienen la clase “.btn”. El método addEventListener permite añadirle un escuchador de eventos a el o los elementos HTML que se especifiquen; en este caso, se añade un evento de tipo click, por lo que, la función “changeBorder()”, será ejecutada cada vez que el usuario presione un botón de la interfaz.
