Последовательное изменение цвета квадратов js

Question

Задачка, которая основана на имеющихся кусках кода, ввела меня в ступор. Только изучаю js, поэтому могу не видеть элементарных решений.

Имеются нарисованные квадраты, их стилизация и кнопка.

<input type="button" value="Клацни"  onclick="colorChange()"/>
<div class="parent">
    <div class="square one"></div>
        <div class="square two"></div>
            <div class="square three"></div>
                 <div class="square four"></div>
</div>
<style>
    .parent{
        display: flex;
    }

    .square {
        width: 120px;
        height: 120px;
        background: black;
        margin: 10px 10px;
    }   
</style>

Задачка следующая.

При нажатии на кнопку квадраты последовательно меняют цвет на любой из списка (список так же необходимо создать);
Цель: сделать все квадраты красными.
Если любой квадрат, из имеющихся, стал красным, смена цвета не должна происходить. Пример:

первые четыре нажатия на кнопку: 1 - зелёный, 2 - синий, 3 - красный, 4 - жёлтый.
вторые четыре нажатия на кнопку: 1 - синий, 2 - жёлтый, 3 - не изменяется, 4 - красный. И так до того, пока все не станут красными.

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

Answer 1

<input type="button" value="Клацни"  onclick="colorChange()"/>
<div class="parent">
    <div class="square one"></div>
    <div class="square two"></div>
    <div class="square three"></div>
    <div class="square four"></div>
</div>

.parent {
    display: flex;
}

.square {
    width: 120px;
    height: 120px;
    background: black;
    margin: 10px 10px;
}

const colors = ['red', 'green', 'yellow', 'blue'];

function colorChange() {
    const squares = document.querySelectorAll('.square'); //найдем все квадраты

    squares.forEach(function (item) { //переберём их
        if(item.style.background !== 'red') { //проверим что квадрат не красный
            const random = Math.floor(Math.random() * (squares.length + 1));
            item.style.background = colors[random];// установим рандомный цвет
        }
    });
}

БЛОГ НА HUSL

Последовательное изменение цвета квадратов js

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