JavaScript: Why doesnt classList.remove work?

Question

here's a part of the code where is function lightOn that must remove class 'light-on' when decorLight has it. Idk but its not working at all... There's similar function above that working.

document.addEventListener("DOMContentLoaded", function(event) {
document.documentElement.setAttribute("data-theme", "light");

const themeSwitcher = document.getElementById("theme-switcher");
const decorLight = document.getElementById("decorLight");

function transformSwitcher() {
    if (themeSwitcher.className == 'pressed')
        themeSwitcher.classList.remove('pressed');
    else themeSwitcher.classList.add('pressed');
}

function lightOn() {
    if (decorLight.className == 'light-on') 
        decorLight.classList.remove('light-on');
    else decorLight.classList.add('light-on');
}

themeSwitcher.onclick = function () {
    transformSwitcher();
    lightOn();
    let currentTheme = document.documentElement.getAttribute("data-theme");
    let switchToTheme = currentTheme === "dark" ? "light" : "dark";
    document.documentElement.setAttribute("data-theme", switchToTheme);
};
});

If the element has more than one class, `decorLight.className` will not equal `light-on` — Barmar, Apr 01 '21 at 19:43
Please post a [mcve]. You can use a [Stack Snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) to make it executable. — Barmar, Apr 01 '21 at 19:43
If you want to toggle a class (meaning put it on if it's not there, and remove it if it's there), JS has `classList.toggle('light-on')` for you. — connexo, Apr 01 '21 at 19:44
I'm pretty sure the browser developers tested their code pretty well before releasing it, and that `classList.remove` works as intended. Note that there is also a `classList.contains` function... — Heretic Monkey, Apr 01 '21 at 19:45
@Barmar Maybe point out that OP in that case needs to do `classList.contains('light-on')`. — connexo, Apr 01 '21 at 19:45
@VLAZ @HereticMonkey @CertainPerformance None of the answers in the marked duplicate mentions `classList.toggle`. — connexo, Apr 01 '21 at 19:59
@connexo They link to MDN, and https://i.stack.imgur.com/HA5jz.png. Also, you're -*free to add answers to the duplicate*. — Heretic Monkey, Apr 01 '21 at 20:04
Since that is such a useful method, it really should't be that well hidden in an answer. I added an answer specifically pointing out `DOMTokenList.prototype.toggle` in the duplicate. — connexo, Apr 01 '21 at 20:07

Sysix · Accepted Answer · 2021-04-01T20:14:55.880

That is because you are checking the className. className can have multiple classes.

Just check your class with

if (themeSwitcher.classList.contains('pressed') and
if (decorLight.classList.contains('light-on')

you can also toggle the class with:

themeSwitcher.classList.toggle('pressed')

and save the if condition.

You can learn more about the classList API here:

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

JavaScript: Why doesnt classList.remove work?

1 Answers1