Как вернуть стили элемента при повторном клике?

Question

[Buksarin]

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

<div class="boxs"></div>
        <div class="boxs"></div>
        <div class="boxs"></div>
        <div class="boxs"></div>
        <div class="boxs"></div>
        <div class="boxs"></div>

.boxs {
    height: 100px;
    width: 100px;
    background-color: black;
}

document.querySelectorAll('.boxs').forEach((element) => {
    element.addEventListener('click', function() {
        this.style.background = "red";
    });

Answer 1

[VegasChickiChicki]

.boxs-active{
background-color: red;
}

this.classList.toggle('boxs-active');

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

Comments

[Buksarin]

this.className = (this.className == 'boxs box' ? 'boxs' : 'boxs box')

Решил проблему данной строчкой
меняю классы при клике
Изначально хотел просто менять конкретные стили , но в принципе и такое решение подходит

[VegasChickiChicki]

Buksarin, Решение немного странное, почему именно так? toggle будет присваивать класс, если его нет и убирать, если он есть. В моем примере 1 слово, у вас целая строчка :D, а для чего? :D