Как заменить цвет фона блока по нажатию на него?

Question

[fgehte]

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

<div class="blocks">
 <div class="block">1</div>
 <div class="block">2</div>
 <div class="block">3</div>
 <div class="block">4</div>
 <div class="block">5</div>
</div>

.blocks {
    display: flex;
}

.block {
    width: 150px;
    height: 150px;
    border: 1px solid grey;
    margin: 50px;
}

let blocks = document.querySelectorAll('.block');
let colors = ['grey', 'red', 'green', 'transparent']

blocks.forEach(function (element) {
    element.addEventListener('click', function() {
        this.style.background = 'blue';
    });
});

Answer 1

[Дмитрий]

const blocks = document.querySelectorAll('.block')
const colors = ['grey', 'red', 'green', 'transparent']

blocks.forEach((el, ind) => {
  el.addEventListener('click', () => {
    let currentColor = el.dataset.colorIndex
    if (isNaN(currentColor)) currentColor = -1

    let nextColor = 1 + Number(currentColor)
    if (nextColor === colors.length) nextColor = 0
    el.dataset.colorIndex = nextColor

    el.style.background = colors[nextColor]
})

Comments

[fgehte]

немного не правильно сформулировал вопрос. Надо чтобы каждый блок менял цвет по кругу

[Дмитрий]

fgehte, Поправил

[0xD34F]

Вызов addEventListener - пропущены закрывающие фигурная и круглая скобки.

Answer 2

[hzzzzl]

Comments

[fgehte]

Воооо. Спасибо!)