Estoy tratando de hacer un texto de arcoíris pero no puedo repetirlo, ¿alguien puede ayudarme?
este es el html
<body> <h1> <span>R</span> <span>A</span> <span>I</span> <span>N</span> <span>B</span> <span>O</span> <span>W</span> </h1> </body>```Y este es el javascript
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'] Quiero hacer un bucle de colores en el lapso usando document.querySelectorAll
No estoy completamente seguro de lo que espera lograr aquí. Creo que desea colorear las letras individuales con los elementos en su matriz de colores secuencialmente.
Puedes hacerlo de varias maneras diferentes. Una de las soluciones más sencillas sería ejecutar una función de devolución de llamada en una lista de nodos (similar a una matriz) utilizando el método forEach .
Algo como esto...
querySelectorAll )O bien, podría agregar una clase en su lugar y probablemente otras cosas también.
Buena suerte.
const letters = document.querySelectorAll('.letters span'); const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; letters.forEach((letter, index) => { letter.style.color = colors[index] }) <body> <h1 class="letters"> <span>R</span> <span>A</span> <span>I</span> <span>N</span> <span>B</span> <span>O</span> <span>W</span> </h1> </body>