20
Окт
2021

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

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

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

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

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

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>

Источник: https://ru.stackoverflow.com/questions/1340070/%D0%9F%D0%B5%D1%80%D0%B5%D0%BA%D0%BB%D1%8E%D1%87%D0%B0%D1%82%D0%B5%D0%BB%D1%8C-3-x-%D1%86%D0%B2%D0%B5%D1%82%D0%BE%D0%B2-%D0%B8%D0%B7-%D0%BC%D0%B0%D1%81%D1%81%D0%B8%D0%B2%D0%B0

Тебе может это понравится...

Добавить комментарий