I have an array containing some colors. I also have a div with some child elements. What I'm trying to acplish is that each child element will get a color from the array. I'm close, and I can console log the colors, but at the moment the child's get assigned the last color in the array.

var colors = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#81c784"];
var setColors = customizeContainer.childNodes;
for (var i = 1; i < setColors.length; i += 2) {
	for (var x = 0; x < colors.length; x++) {
		setColors[i].style.backgroundColor = colors[x];
	}
}

I have an array containing some colors. I also have a div with some child elements. What I'm trying to acplish is that each child element will get a color from the array. I'm close, and I can console log the colors, but at the moment the child's get assigned the last color in the array.

var colors = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#81c784"];
var setColors = customizeContainer.childNodes;
for (var i = 1; i < setColors.length; i += 2) {
	for (var x = 0; x < colors.length; x++) {
		setColors[i].style.backgroundColor = colors[x];
	}
}

  <div id="customizeMenu" class="col l12">
    <div class="col l1"></div>
    <div class="col l1"></div>
    <div class="col l1"></div>
    <div class="col l1"></div>
    <div class="col l1"></div>
    <div class="col l1"></div>
    <div class="col l1"></div>
    <div class="col l1"></div>
    <div class="col l1"></div>
  </div>

• javascript
• arrays

Share Improve this question Follow edited Dec 13, 2017 at 3:24 artgb 3,25366 gold badges2020 silver badges4040 bronze badges asked Dec 13, 2017 at 1:16 Sander HellesøSander Hellesø 27111 gold badge77 silver badges1616 bronze badges 4

• Why the double loop? – Robby Cornelissen Commented Dec 13, 2017 at 1:20
• Please describe the desired output – klugjo Commented Dec 13, 2017 at 1:20
• check my edit, uploaded an img that describe what im trying to acplish. Each element should have a different color. – Sander Hellesø Commented Dec 13, 2017 at 1:23
• @SanderHellesø you have 8 colors but 9 elements. What color should the last have ? – Gabriele Petrioli Commented Dec 13, 2017 at 1:24

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

Here is a solution that will loop the colors once they are all used.

var colors = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#81c784"];
var customizeContainer = Array.from(document.querySelectorAll('#customizeMenu > div'));

customizeContainer.forEach(function(node, i) {
    node.style.backgroundColor = colors[i % colors.length];
});

#customizeMenu>div {
  width: 2em;
  height: 2em;
  display: inline-block;
}

<div id="customizeMenu" class="col l12">
  <div class="col l1"></div>
  <div class="col l1"></div>
  <div class="col l1"></div>
  <div class="col l1"></div>
  <div class="col l1"></div>
  <div class="col l1"></div>
  <div class="col l1"></div>
  <div class="col l1"></div>
  <div class="col l1"></div>
</div>

---

The problem with your code was that you were looping over all the colors and assigning them for each node. So they all got the last color.

Another problem (that you mentioned in the ments) about the nodes being every 2 is because the childNodes returns text nodes and ments as well. So you either need to use children or use document.querySelectorAll to select the wanted elements directly.

I found 2 bugs:

1. Miss the height of child div(So you will not see the div display& changed.)
2. Loop error(You should use one loop.)

var colors = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#81c784"];
var customizeContainer = document.getElementById("customizeMenu");
var setColors = customizeContainer.children;
for (var i = 0; i < setColors.length; i++) {
  setColors[i].style.backgroundColor = colors[i];
}

.l1 {
  height: 10px;
  width: 10px;
  background: green;
  float: left;
  margin: 5px;
}

<div id="customizeMenu" class="col l12">
  <div class="col l1"></div>
  <div class="col l1"></div>
  <div class="col l1"></div>
  <div class="col l1"></div>
  <div class="col l1"></div>
  <div class="col l1"></div>
  <div class="col l1"></div>
  <div class="col l1"></div>
</div>

Here is a working snippet.

You can avoid the double loop and make your array of elements with getElementsByClassName();

Hope it helps

var setColors = document.getElementsByClassName('l1');
var colors = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#81c784"];

for (var i = 0; i < setColors.length; i++) {
    setColors[i].style.backgroundColor = colors[i];
  }

.l1 {
  min-width: 5vw;
  min-height 20px;
  background: red;
  margin: 0 5px;
  display: inline-block;
}

<div id="customizeMenu" class="col l12">
  <div class="col l1">&nbsp</div>
  <div class="col l1">&nbsp</div>
  <div class="col l1">&nbsp</div>
  <div class="col l1">&nbsp</div>
  <div class="col l1">&nbsp</div>
  <div class="col l1">&nbsp</div>
  <div class="col l1">&nbsp</div>
  <div class="col l1">&nbsp</div>
  <div class="col l1">&nbsp</div>
</div>

Use querySelectorAll() to target elements. The following is more simple and cleaner:

var colors = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#81c784"];

var el = document.querySelectorAll('#customizeMenu > .l1');
//OR (If you have the older browser)
//var el =[].slice.call(document.querySelectorAll('#customizeMenu > .l1'));
el.forEach(function(item, i){
  item.style.backgroundColor = colors[i];
});

<div id="customizeMenu" class="col l12">
  <div class="col l1">A</div>
  <div class="col l1">B</div>
  <div class="col l1">C</div>
  <div class="col l1">D</div>
  <div class="col l1">E</div>
  <div class="col l1">F</div>
  <div class="col l1">J</div>
  <div class="col l1">H</div>
  <div class="col l1">I</div>
</div>

Couple of things you're doing wrong in your code

• Double loop: Iterating over the child nodes and the colors array unnecessarily
• Incrementing the counter by 2 in the first loop

You need to iterate over colors array once and if there is corresponding child node exists for the index, set the color

var colors = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#81c784"];
var setColors = customizeContainer.childNodes;
for (var i = 1; i < colors.length; i++) {
        if (setColors[i] != 'undefined') {
            setColors[i].style.backgroundColor = colors[i];
        }
    }
}