Una de las interacciones comunes en las páginas web es cambiar dinámicamente el color de fondo al hacer clic en un botón. Vamos a explorar cómo podemos lograr esto utilizando JavaScript y querySelectorAll().
Paso 1: Selección de elementos
Primero, necesitamos seleccionar los botones que desencadenarán el cambio de color. Utilizaremos querySelectorAll() para seleccionar todos los botones con la clase "boton".
Selección de elementos
const botones = document.querySelectorAll('.boton');Paso 2: Agregar eventos
Luego, vamos a iterar sobre los botones y agregar un evento de clic a cada uno. Cuando se haga clic en un botón, cambiará el color de fondo de la página.
Agregamos evento
botones.forEach(boton => {
boton.addEventListener('click', () => {
cambiarColor();
});
});
Paso 3: Función para cambiar el color
Ahora, definiremos la función cambiarColor() que cambiará el color de fondo de la página al azar.
Colores
function cambiarColor() {
const colores = ['#FF5733', '#33FF57', '#5733FF', '#FF3377', '#33A8FF'];
const colorAleatorio = colores[Math.floor(Math.random() * colores.length)];
document.body.style.backgroundColor = colorAleatorio;
}
Código completo
Aquí tienes el código completo que hace todo lo anterior:
JS
const botones = document.querySelectorAll('.boton');
botones.forEach(boton => {
boton.addEventListener('click', () => {
cambiarColor();
});
});
function cambiarColor() {
const colores = ['#FF5733', '#33FF57', '#5733FF', '#FF3377', '#33A8FF'];
const colorAleatorio = colores[Math.floor(Math.random() * colores.length)];
document.body.style.backgroundColor = colorAleatorio;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./app.js" defer></script>
</head>
<body>
<button class="boton">Botón 1</button>
<button class="boton">Botón 2</button>
<button class="boton">Botón 3</button>
</body>
</html>
Resultado!
Contáctanos: Queremos Escucharte
¿Tienes alguna opinión que quieras compartir? ¿Tienes sugerencias de temas que te gustaría ver cubiertos en nuestro blog? ¿O tal vez tienes alguna pregunta o duda que quisieras resolver? ¡Nos encantaría saber de ti!
Por favor, no dudes en ponerte en contacto con nosotros haciendo click aquí