Este código que escribí diseña los caracteres de la entrada del usuario en un arcoíris.
function button(){ var name = window.prompt("Insert your name"); var namearray = []; namearray = Array.from(name); let colors = ["red","orange","yellow","green","blue","purple"]; for(i=0; i < namearray.length; i++){ element = document.createElement("p"); elementtext = namearray[i]; element.innerHTML = elementtext; document.getElementById("namediv").appendChild(element); element.style.color = colors[i]; } }El problema es que solo colorea palabras de hasta 6 caracteres. Lo que pensé fue repetir la iteración de la matriz de colores para colorear el resto de la entrada, pero no sé cómo aplicarlo.
Utilice el operador % :
element.style.color = colors[i % colors.length];cuando ingresa una cadena más grande que la matriz de colores, accederá a un índice que no existe. necesitas tomar el primer color y moverlo hasta el final:
var name = window.prompt("Insert your name"); var namearray = []; namearray = Array.from(name); let colors = ["red","orange","yellow","green","blue","purple"]; for(i=0; i < namearray.length; i++){ element = document.createElement("p"); elementtext = namearray[i]; element.innerHTML = elementtext; document.getElementById("namediv").appendChild(element); const currentColor = colors.shift(); // take the first color colors.push(currentColor); // push it to the end of the array element.style.color = currentColor; }aquí hay un ejemplo de trabajo: https://jsfiddle.net/oznw9qeh/