Как заставить прослушиватель событий изменить цвет фона css с помощью javascript?

Question

Я хотел бы иметь возможность изменять цвет фона элемента списка. Когда я удаляю оператор if и просто устанавливаю цвет фона, он работает. Однако это не работает с оператором if. Не понимаю, почему не работает. Пожалуйста, помогите.

HTML

<ul id="testList"> Test List
    <li id="item1">Item 1</li>
    <li id="item2">Item 2</li>
</ul>


CSS

#testList {
    width: 100px;
    background-color: grey;
    margin: 200px 0px 0px 50px;
    list-style-type: none;
}
#testList li {
    color: black;
    padding: 10px;
    border: 1px solid black;
}
#testList li:hover{cursor: pointer;}
#item1 {background-color: white;}


Javascript

var item1 = document.getElementById('item1');
function setColor(){
    if (item1.style.backgroundColor == 'white'){
        item1.style.backgroundColor = 'green';
    } else if (item1.style.backgroundColor == 'green'){
        item1.style.backgroundColor = 'white';
    }
}
item1.addEventListener('click', function(){setColor()}, false);

Answer 1

Ваша проблема в том, что начальное значение цвета фона на элементе не установлено. Элемент 1 имеет белый цвет фона из стиля css идентификатора. Но item1.style.backgroundColor вернет только значение, установленное непосредственно на встроенном элементе.

var item1 = document.getElementById('item1');
function setColor(){
    if (!item1.style.backgroundColor || item1.style.backgroundColor == 'white'){
        item1.style.backgroundColor = 'green';
    } else if (item1.style.backgroundColor == 'green'){
        item1.style.backgroundColor = 'white';
    }
}
item1.addEventListener('click', function(){setColor()}, false);

#testList {
    width: 100px;
    background-color: grey;
    margin: 200px 0px 0px 50px;
    list-style-type: none;
}
#testList li {
    color: black;
    padding: 10px;
    border: 1px solid black;
}
#testList li:hover{cursor: pointer;}
#item1 {background-color: white;}

   <ul id="testList"> Test List
    <li id="item1">Item 1</li>
    <li id="item2">Item 2</li>
</ul>

Answer 2

Правильный способ сделать такую ​​замену:

Вы объявляете класс

.background-green {
    background-color: green !important;
}

Затем вы просто проверяете, есть ли у определенного элемента этот класс. Если есть, удалите его. В противном случае добавьте его.

function switchBackground() {
    let el = document.getElementById("myElementId");
    if (el.classList.contains("background-green")) {
        el.classList.remove("background-green");
    }
    else {
        el.classList.add("background-green");
    }
}

Это заставит элемент переключаться между его значением по умолчанию и зеленым. Вы можете указать белый цвет фона по умолчанию в вашем CSS.