Wie Farbe der aufeinander folgenden Benutzer eingegebene Wörter basierend auf Kontrollkästchen

Question

ändern Ich brauche im Grunde fünf Kontrollkästchen, alle mit verschiedenen Farben. Was auch immer der Benutzer eingibt, nachdem er geklickt hat, muss auf dem Bildschirm als aufeinanderfolgende Farben gedruckt werden, basierend darauf, welche Kästchen aktiviert sind. Dh: Wenn blau und gelb markiert sind, ist das erste Wort blau und das zweite gelb, das dritte blau und das vierte gelb. Wenn drei Kästchen angekreuzt sind, wird ein Looping-Trio von Farben gesehen und so weiter bis zu 5 Kästchen!

Mein Plan war, den Text zu nehmen, den der Benutzer schrieb, und es in ein Array zu setzen. Dann benutze ich eine for-Schleife, die ich inkrementieren und document.createElement('div') verwenden und diese Wörter in einen Container (das Eltern-div) auf dem Körper anhängen soll.

function colourCode() { 

     var userArray = []; 
     var userText = document.getElementById("textArea").value; 
     userArray.push(userText); 

     var container = document.getElementById("container"); 
     for (var i = 0; i < userArray.length; i++) { 
      var div = document.createElement("div");     

      div.innerHTML = (userArray[i]);     

      container.appendChild(div); 

Dies funktioniert gut.

Dann wollte ich eine if-Anweisung verwenden, um die Farbe zu ändern, wenn das Kontrollkästchen aktiviert ist.

Dies ändert die gesamte sentance blau, auch wenn andere Boxen überprüft werden. Tatsächlich ändert sich die Farbe in das Feld, das zuerst geprüft wird.

Ich dachte darüber nach, irgendwie einen Modulo-Operator zu implementieren, der die Kästchen gleichzeitig durchlaufen könnte, wenn das Wort vom Array angehängt wird, aber keine Ahnung wie.

Wer hat irgendwelche Ideen?

Auch jQuery ist nicht eine Option!

Answer 1

Hier ist ein funktionierendes Snippet.

Ihre ausgewählten Farben innerhalb eines Arrays drücken und sie wählen nach dem Index Ihrer Worte

var container = document.getElementById("container"); 
 
var blue = document.getElementById("checkboxBlue"); 
 
var yellow = document.getElementById("checkboxYellow"); 
 
var red = document.getElementById("checkBoxRed"); 
 

 
function colourCode() { 
 
    container.innerHTML = ""; //Reset text 
 

 
    //Push all the colors selected 
 
    var colorsArray = []; 
 
    if (blue.checked) 
 
    colorsArray.push("blue"); 
 
    if (yellow.checked) 
 
    colorsArray.push("yellow"); 
 
    if (red.checked) 
 
    colorsArray.push("red"); 
 

 
    var words = document.getElementById("textArea").value.trim().split(" "); 
 
    for (let i = 0; i < words.length; i++) { 
 
    let color = colorsArray[i % colorsArray.length]; //Take the correct color 
 
    container.innerHTML += "<span style=\"color:" + color + "\">" + words[i] + " </span>"; //Add span with the word in correct color 
 
    }; 
 
}

<input type="checkbox" id="checkboxBlue">Blue 
 
<input type="checkbox" id="checkboxYellow">Yellow 
 
<input type="checkbox" id="checkBoxRed">Red 
 
<br> 
 
<textarea id="textArea"></textarea> 
 
<br> 
 
<button onclick="colourCode()">Generate</button> 
 
<div id="container"></div>