Переключатель 3-x цветов из массива

Question

Всем ку, есть скрипт который по идее должен при клике на второй и третий блок, перекрашивать блок на котором сработал клик сначала в красный цвет, затем в синий, а потом в белый, после в первоначальный цвет и так по кругу.

Но у меня работают первые два шага, то есть красный > синий, а должно быть так:

красный > синий > белый > первоначальный цвет и повтор по кругу.

Как можно добиться этого результата при помощи массива?

let a = document.querySelector('.main');

a.addEventListener('click', function(e){

let x = e.target.className;
let names = ['block1', 'block2'];
let change = e.target.style;
let colors = ['red', 'DodgerBlue', 'white'];

if(x == names[0] || x == names[1] ){

if(change.background != colors[0]){
change.background = colors[0];  
}   

else if(change.background == colors[0]) {
change.background = colors[1];
}

else if (change.background == colors[1] ){
change.background = colors[2];  
}

}
})

body{
background: orange;     
user-select:none;
}

.main{
margin-top: 80px;
margin-left: 200px;
position:relative;  
height: 100px;
}

.block0{
height: 100%;   
width:250px;
background: white;
text-align:center;
}

.block1{
height: 100%;   
width:250px;
background: gray;   
text-align:center;
}

.block2{
height: 100%;   
width:250px;
background: gold;   
text-align:center;
}

<div class="main">

<div class ='block0'>
1 блок - Цвета нет
</div>

<div class="block1">
2 блок - Цвет работает +
</div>

<div class="block2">
3 блок - Цвет работает +
</div>

</div>

Answer 1

Нужно помнить, что JS является регистрозависимым. Обратите внимание на название цвета DodgerBlue.

let a = document.querySelector('.main');

a.addEventListener('click', function(e) {

  let x = e.target.className;
  let names = ['block1', 'block2'];
  let change = e.target.style;
  let colors = ['red', 'dodgerblue', 'white'];
  
  if (x == names[0] || x == names[1]) {

    if (change.background == '') {
      change.background = colors[0];
    } else if (change.background == colors[0]) {
      change.background = colors[1];
    } else if (change.background == colors[1]) {
      change.background = colors[2];
    } else {
      change.background = '';
    }

  }
})

body {
  background: orange;
  user-select: none;
}

.main {
  position: relative;
  height: 100px;
  margin-top: 80px;
  margin-left: 200px;
}

[class^=block] {
  height: 100%;
  width: 250px;
  text-align: center;
}

.block0 { background: white; }
.block1 { background: gray;  }
.block2 { background: gold;  }

<div class="main">
  <div class='block0'>1 блок - Цвета нет</div>
  <div class="block1">2 блок - Цвет работает +</div>
  <div class="block2">3 блок - Цвет работает +</div>
</div>

БЛОГ НА HUSL

Переключатель 3-x цветов из массива

Ответы (1 шт):