Поочередная смена цветов всем блокам
Как вытащить данные двух переменных count и countColor из цикла for и передать их в
block[count].style.background = colors[countColor];
У меня всего 50 блоков. Нужно, чтобы цвета фона в этих блоках поочередно сменялись.
Например:
1-блок красный цвет
2-блок синий
3-блок зеленый
4-блок красный
5-блок синий
6-блок зеленый и т.д.
let main = document.querySelector('.main_block');
let child_block = document.querySelector('.child_block');
function xex(){
for(let i = 0; i < 50; i++){
let xep = document.createElement('div');
child_block.prepend(xep);
xep.className = 'block';
xep.innerHTML = 'Xopa'
}
}
xex();
let block = document.querySelectorAll('.block');
function xex2(){
const colors = ['red', 'blue', 'green'];
let count = 0;
let countColor = 0;
if(count == colors.length){
count = 0;
}
if(countColor == colors.length){
countColor = 0;
}
for(let i = 0; i < 50; i++){
count = count + 1;
countColor = countColor + 1;
}
block[count].style.background = colors[countColor];
}
xex2();.main_block{
display:grid;
grid-template-columns: 100%;
padding:10px;
margin:50px;
border:1px solid black;
}
.block{
display: inline-block;
border:1px solid black;
font-size:18px;
padding:10px;
margin:10px;
}<div class = "main_block">
<div class = "child_block">
</div>
</div>