Estoy luchando por comprender los bucles JS. Encontré un tutorial en línea para un botón que cambia colores aleatorios para un div id="container". Sin embargo, resulta que los colores aleatorios se repiten con frecuencia después de un clic. Quiero cambiar el código y recorrer los colores de la matriz uno por uno y cambiar el color del contenedor div# después de cada clic. Este es mi código:
let colors = ["blue", "yellow", "green", "brown", "orange"]; let btn = document.getElementById("btn"); btn.addEventListener("click", function () { let container = document.getElementById("container"); for (i = 0; i < colors.length; i++) { let selectColor = colors[i]; } container.style.backgroundColor = selectColor; });Me sale el error: asignación a variable no declarada i. ¿Alguien me puede ayudar?
Está recorriendo todos los colores de la matriz a la vez y luego solo usa el último para establecer el color de fondo.
Solo debe incrementar en uno y luego establecer el color.
let colors = ["blue", "yellow", "green", "brown", "orange"]; let btn = document.getElementById("btn"); let i = 0; let container = document.getElementById("container"); btn.addEventListener("click", function () { i++; if(i >= colors.length) i = 0; container.style.backgroundColor = colors[i]; });Debe declarar la variable i en la línea 6, por lo que en lugar de
for (i = 0; i < colors.length; i++) { let selectColor = colors[i]; }tendrías
for (let i = 0; i < colors.length; i++) { let selectColor = colors[i]; }te perdiste declarar "i" en el ciclo for.
for(let i = 0; i < colors.length; i++) { let selectColor = colors[i]; }