Cambia el color de fondo al hacer clic con JavaScript (¡truco súper sencillo!)

Introducción

¿Alguna vez te has preguntado cómo reaccionan al instante los sitios web cuando haces clic en algo?
Vamos a crear una pequeña función divertida: cambiar el color de fondo de una página con un solo clic. ¡Sencillo, limpio y muy apto para principiantes!

Qué hace este código

Este código escucha los clics en cualquier parte de la página web.
Cada vez que haces clic, cambia aleatoriamente el color de fondo de la página.

Explicación del código

const htmlBody = document.querySelector('body')

Aquí estamos seleccionando el elemento <body> de la página web.

Este es el contenedor principal de todo lo que ves en la página.

const randomClickFunction = function () {

Estamos creando una función que se ejecutará cada vez que el usuario haga clic.

const colors = ["red", "green", "yellow", "blue", "orange", "grey"];

Este es un array de colores. El fondo cambiará aleatoriamente a uno de estos colores.

const randomIndex = Math.floor(Math.random() * colors.length);

Math.random() devuelve un número aleatorio entre 0 y 1. Lo multiplicamos por el número de colores. Math.floor() lo convierte en un número entero (índice).

const randomColor = colors[randomIndex];

Usando el índice aleatorio, elegimos un color del array.

console.log('User clicked and the color is changed to' + randomColor);

Registra el color seleccionado en la consola del navegador. Útil para depurar y aprender.

htmlBody.onclick = randomClickFunction;

Esto vincula la función al evento de clic. Cada vez que el usuario hace clic, la función se ejecuta.

Código final

const htmlBody = document.querySelector('body');
const randomClickFunction =function () { 
    const colors = ["red", "green", "yellow", "blue", "orange", "grey"]; 
    const randomIndex = Math.floor(Math.random() * colors.length); 
    const randomColor = colors[randomIndex]; htmlBody.style.backgroundColor = randomColor; 
    console.log('User clicked and the color is changed to' + randomColor); 
} 
htmlBody.onclick = randomClickFunction;