Why div inside div is color is not changing through JavaScript array

Question

    var ar = ['.two_in','.three_in','.four_in'], pb =  "> *";
    ar.forEach(function(x){       
    var sel = document.querySelectorAll( x + pb);
    
        var colors = {};       
        colors[ar[0]] = 'blue';
        colors[ar[1]] = 'green';
        colors[ar[2]] = 'red';
        
    for(var i = 0;i<sel.length;i++){
    sel[i].style.backgroundColor = colors[sel[i].className];
    }  
  })

<div class="two_in">
  <div class="demo">blue</div>
  <div class="demo">blue</div>
  <div class="demo">blue</div>
</div>
<br>
<div class="three_in">
  <div class="demo">green</div>
  <div class="demo">green</div>
  <div class="demo">green</div>
</div>
<br>

<div class="four_in">
  <div class="demo">red</div>
  <div class="demo">red</div>
  <div class="demo">red</div>
</div>

I want to change all div color inside two_in to blue, three_in to green, and four_in to red respectively, what's the missing code? Can anyone explain it?

Example:

The all div inside two_in (three div whose div class is demo) should be blue color and as for the three_in and four_in.

Answer 1

Here is the mistake:

colors[ar[0]] = 'blue';
colors[ar[1]] = 'green';
colors[ar[2]] = 'red';

It is assigning a non primitive index there. What you need to is:

var ar = ['.two_in', '.three_in', '.four_in'],
    pb = " > *";
ar.forEach(function(x) {
  var sel = document.querySelectorAll(x + pb);
  var colors = {};
  colors[0] = 'blue';
  colors[1] = 'green';
  colors[2] = 'red';

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

<div class="two_in">
  <div class="demo">blue</div>
  <div class="demo">blue</div>
  <div class="demo">blue</div>
</div>
<br>
<div class="three_in">
  <div class="demo">green</div>
  <div class="demo">green</div>
  <div class="demo">green</div>
</div>
<br>
<div class="four_in">
  <div class="demo">red</div>
  <div class="demo">red</div>
  <div class="demo">red</div>
</div>

Is the above what you want? Or, if you need the colour based on the text, then...

var ar = ['.two_in', '.three_in', '.four_in'],
    pb = " > *";
ar.forEach(function(x) {
  var sel = document.querySelectorAll(x + pb);
  var colors = {};
  colors['blue'] = 'blue';
  colors['green'] = 'green';
  colors['red'] = 'red';

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

<div class="two_in">
  <div class="demo">blue</div>
  <div class="demo">blue</div>
  <div class="demo">blue</div>
</div>
<br>
<div class="three_in">
  <div class="demo">green</div>
  <div class="demo">green</div>
  <div class="demo">green</div>
</div>
<br>
<div class="four_in">
  <div class="demo">red</div>
  <div class="demo">red</div>
  <div class="demo">red</div>
</div>