En el desarrollo web y de aplicaciones web , es fundamental no solo crear sitios funcionales, sino también ofrecer una experiencia interactiva a los usuarios. En este artículo, aprenderás cómo agregar un controlador de eventos de clic a un botón utilizando JavaScript. Esta técnica te permitirá realizar acciones personalizadas cuando un usuario interactúa con el botón, ya sea por ejemplo dar click.
Agregar eventos a un botón
// define la funcion
const clickHandler = (event) => {
window.alert('El elemento ha sido clickeado!');
};
// selecciona el elemento
const btn = document.getElementById('click-button');
btn.addEventListener('click', clickHandler);
En el código proporcionado, hemos creado un controlador de eventos de click en JavaScript para un botón.
La función clickHandler es la encargada de gestionar el evento de clic en el botón. En este caso, hemos utilizado una función simple que muestra una ventana emergente utilizando window.alert() con el mensaje "El elemento ha sido clickeado!".
Después de definir la función clickHandler, seleccionamos el elemento del botón utilizando getElementById() y lo asignamos a la variable btn. El id debe ser el mismo que declararmos en el HTML
Luego, utilizamos el método addEventListener() para agregar el evento al botón. Le pasamos dos argumentos: el evento que deseamos escuchar (en este caso, 'click') y la función clickHandler que se ejecutará cuando ocurra el evento.
De esta manera, cuando un usuario haga clic en el botón, se llamará a la función clickHandler, y se mostrará una ventana emergente con el mensaje especificado.
Cambiar color de button al dar click
const changeColorHandler = () => {
const button = document.getElementById('click-button');
button.style.backgroundColor = 'red';
};
const clickButton = document.getElementById('click-button');
clickButton.addEventListener('click', changeColorHandler);
Hemos definido una nueva función llamada changeColorHandler. Esta función se encarga de cambiar el color del botón. Primero, seleccionamos el botón utilizando getElementById y lo asignamos a la variable button. Luego, utilizamos la propiedad style.backgroundColor para modificar el color de fondo del botón y le asignamos el valor 'red' (rojo en este caso). Puedes personalizar el color utilizando nombres de colores o valores hexadecimales.
Cuando un usuario haga clic en el botón, se llamará a la función changeColorHandler y el color de fondo del botón cambiará al color especificado.
De igual manera podemos agregar otras funciones que se ejecuten al dar click sobre un botón y de esta manera agregar interactividad a nuestras web apps modificando la apariencia de nuestra web app o incluso realizar tareas complejas como creación de documentos, cifrado de contenido o lo que se te ocurra.
Recuerda que puedes ayudarnos con el hecho de compartir en redes sociales.