Question

我需要基本上有五个复选框，所有颜色都不同。无论用户在点击后输入什么类型，都需要根据检查的方框将其作为连续颜色打印到屏幕上。即：如果勾选蓝色和黄色，则第一个单词将为蓝色，第二个单词为黄色，第三个为蓝色，第四个为黄色。如果勾选了三个框，将会看到循环的三个颜色，最多可达5个框！

我的计划是将用户编写的文本放入数组中。然后使用for循环我想要递增并使用document.createElement('div')并将这些单词附加到正文中的容器（父div）中。

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);

这很好用。

然后，如果选中此框，我想使用if语句更改颜色。

if (document.getElementById("cbox1").checked === true) {

    document.getElementById("container").style.color = "Blue";

}

即使检查了其他方框，这也会将整个发票变为蓝色。事实上，它会将颜色更改为首先检查的任何一个框。

我想过以某种方式实现了一个模数运算符，它可能在从数组中追加单词的同时遍历复选框，但不知道如何。

有人有任何想法吗？

此外， jQuery 不是一个选项！

Answer 1

这是一个工作片段。

将所选颜色推入数组中，然后根据单词的索引选择它们

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>

如何根据复选框

1 个答案: