Code : const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"]; const btn = document.getElementById("btn"); const color = document.querySelector(".color"); btn.addEventListener("click", function () { let hexColor = "#"; for (let i = 0; i < 6; i++) { hexColor += hex[getRandomNumber()]; console.log(hexColor); color.textContent = hexColor; document.body.style.backgroundColor = hexColor; } }); function getRandomNumber() { return Math.floor(Math.random() * hex.length); }Aquí no puedo entender cómo se ejecuta for loop. Cómo for loop está estableciendo una conexión con la función getRandomNumber(). ¿Podría alguien explicar cómo funciona el ciclo for con respecto a este código paso a paso, por favor?
Gracias
getRandomNumberFunction devuelve un valor aleatorio de la variable hexadecimal como puede ver aquí
function getRandomNumber() { return Math.floor(Math.random() * hex.length); // this returns a random number based on the length of the hex which is 16 it will choose from 0-15 }luego agregue el valor tomado a la variable hexColor que inicialmente se asigna con "#"
hexColor += hex[getRandomNumber()]; // initial value "#" + "hex[0-15] random digit"Al final del código, se verá como este código hexadecimal #32a856 porque solo se ejecutará durante 6 turnos y luego se establecerá en el color de fondo del elemento del cuerpo.
Lo que sucede en getRandomNumber() es que cada vez que se llama a la función, genera un número aleatorio entre 0 y 15 (que es la longitud de la matriz hex[] )
Más información sobre JavaScript Math aquí
for (let i = 0; i < 6; i++) let i = 0 Inicialmente definimos la variable i con 0 como su valor.
i < 6 Esta es la condición del bucle. Esto significa que cuando esta condición es true , el código dentro del ciclo se volverá a ejecutar hasta que se vuelva false .
i++ Esto es como la parte 'do' del bucle. Entonces, siempre que se cumpla la condición, esta es la acción que se realizará a la variable que definimos inicialmente. En este caso, el valor i se incrementa (++)/ i=i+1 .
Cuando ocurre el bucle, hexColor se concatena con un valor aleatorio de la matriz hex[]
hexColor += hex[getRandomNumber()];Por ejemplo:
Si la salida de la función
getRandomNumber()es =11. Luego, la salidahex[getRandomNumber()]es =hex[11].hex[11]="B". Por lo tanto, hexColor se convierte en#B: esto se repite seis (6) veces hasta que se completan los 6 caracteres. Salida de muestra
Bucle 1:#B
Bucle 2:#B3... etc.
color.textContent = hexColor; document.body.style.backgroundColor = hexColor; está dentro del bucle for. Lo que significa que color.textContent y document.body.style.backgroundColor se configuran 6 veces. Lo cual no debería ser y solo debería establecerse cada vez que se complete el bucle.
Aquí hay una muestra de código en la que moví dichas líneas fuera del bucle para que solo cambiara color.textContent y document.body.style.backgroundColor una vez que se complete el hexColor /loop.
const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"]; const btn = document.getElementById("btn"); btn.addEventListener("click", function () { let hexColor = "#"; for (let i = 0; i < 6; i++) { hexColor += hex[getRandomNumber()]; } document.getElementById('color').innerHTML = hexColor; document.body.style.backgroundColor = hexColor; }); function getRandomNumber() { return Math.floor(Math.random() * hex.length); } <html> <body> <p style="font-size:48px">Color (hexColor) value: <span id="color"></span> </p> <button id="btn" style="padding: 20px;">Get Random Color</button> </body> </html>¡Espero que esto ayude!
Sin embargo, aquí hay muchas respuestas detalladas, ya que su pregunta es sobre el bucle for.
Lo siguiente significa que llamará a getRandomNumber() 6 veces , por lo que colocará caracteres aleatorios de su matriz hex , formando una cadena de 6 caracteres (por ejemplo, #847ABC)
let stringToBeCreated = ''; for (let i = 0; i < 6; i++) { console.log('value of i', i); stringToBeCreated += i; // this is replaced by your randomNumber and hex array } console.log('string created', stringToBeCreated)