Estoy haciendo The Web Developer Bootcamp de Colt Steele y me quedé atascado en un desafío.
Mi tarea es seleccionar todos los intervalos, iterar sobre ellos y asignar cada uno de los colores de la matriz de colores.
Mi solución es:
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; //PLEASE DON'T CHANGE THIS LINE! //YOU CODE GOES HERE: const lettersList = document.querySelectorAll('span'); for (let i = 0; i < colors.length; i++){ lettersList.forEach((letter) => { letter.style.color = "colors[i]"; }); } Mi idea es usar un ciclo for para iterar los valores de la matriz de colores (detener el ciclo al llegar al último elemento). Anidada dentro del bucle for está la función forEach que ejecutará la función letter.style.color = "colors[i]" que asignará el valor de la matriz de colores iterada a cada valor del intervalo selectorAll.
¿Puedes detectar mi error?
"colors[i]" es una cadena que no será interpretada por javascript. Elimina las comillas. Además, no necesitas ambos bucles. Puede acceder al índice en su bucle forEach como segundo argumento:
lettersList.forEach((letter, i) => { letter.style.color = colors[i]; });Aquí hay un fragmento que demuestra, también teniendo en cuenta que su matriz de colores puede no tener la misma longitud que la cantidad de tramos.
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; //PLEASE DON'T CHANGE THIS LINE! //YOU CODE GOES HERE: const lettersList = document.querySelectorAll('span'); lettersList.forEach((letter, i) => { let index = i < colors.length ? i : i % colors.length console.log(index) letter.style.color = colors[index]; }); span { display: inline-block; padding: 10px; } <span>Color me</span> <span>Color me</span> <span>Color me</span> <span>Color me</span> <span>Color me</span> <span>Color me</span> <span>Color me</span> <span>Color me</span> <span>Color me</span> <span>Color me</span>