La interactividad es un elemento fundamental de cualquier interfaz de usuario moderna. En este artículo, te mostraremos cómo potenciar la interactividad en tu página web mediante la manipulación de botones utilizando JavaScript. Nos centraremos en la codificación de una función que permita a un botón estar activo mientras se desactivan automáticamente el resto.
Entendiendo el Concepto
Antes de saltar hacia la implementación del código, es importante entender de qué trata la función que estamos por crear. Imagina un escenario en el que tienes múltiples botones en tu página web. Quieres que solo un botón pueda ser presionado en un momento dado, desactivando automáticamente los demás.
Esto garantiza una mejor navegación para el usuario, ya que previene la posibilidad de lanzar varias acciones al mismo tiempo. También ayuda en el control de la lógica de la aplicación evitando conflictos innecesarios. A menudo también mejora la eficiencia de rendimiento en JavaScript.
Preparando el escenario
Supongamos que tienes un grupo de tres botones en tu página HTML, cada uno con un identificador único. Tu tarea es hacer que sólo se pueda activar un botón a la vez.
<button id="boton1">Botón 1</button>
<button id="boton2">Botón 2</button>
<button id="boton3">Botón 3</button>
Pero, ¿cómo podemos lograr esta funcionalidad con JavaScript? Aquí es donde entramos en el mundo de la manipulación de eventos en JavaScript.
Creación de la Función de Desactivación
Lo primero que haremos será crear una función que desactive todos los botones excepto el que ha sido clicado por el usuario. Para hacer esto posible, vamos a sacar provecho del método addEventListener() de la interfaz EventTarget que proporciona JavaScript.
function desactivarBotones(id) {
var todosLosBotones = document.getElementsByTagName('button');
for (var i=0; i<todosLosBotones.length; i++) {
if (todosLosBotones[i].id != id) {
todosLosBotones[i].disabled = true;
} else {
todosLosBotones[i].disabled = false;
}
}
}
document.getElementById('boton1').addEventListener('click', function() {desactivarBotones('boton1');});
document.getElementById('boton2').addEventListener('click', function() {desactivarBotones('boton2');});
document.getElementById('boton3').addEventListener('click', function() {desactivarBotones('boton3');});
De esta forma, cada vez que se haga click en un botón, todos los demás se desactivan, asegurando que solo el botón clicado por el usuario esté activo. La funcionalidad implementada de este modo contribuye a una mejor experiencia de usuario y al correcto funcionamiento de la lógica de la interfaz en la que estamos trabajando.
Consideraciones Finales
Aunque en este artículo nos hemos centrado en desactivar botones, la lógica puede extenderse a otros elementos interactivos, como enlaces, formularios y más.
Esperamos que este artículo te haya ayudado a entender cómo implementar la función para desactivar otros botones cuando uno está activo usando JavaScript. Aunque puede parecer una tarea pequeña, este tipo de detalles pueden tener un gran impacto en la experiencia del usuario y en la eficiencia de tu código. ¡Feliz codificación!