JavaScript: Why doesnt classList.remove work? [duplicate]

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
– Barmar, Commented Apr 1, 2021 at 19:43
Please post a minimal reproducible example. You can use a Stack Snippet to make it executable. — Barmar
– Barmar, Commented Apr 1, 2021 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
– connexo, Commented Apr 1, 2021 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
– Heretic Monkey, Commented Apr 1, 2021 at 19:45
@Barmar Maybe point out that OP in that case needs to do classList.contains('light-on'). — connexo
– connexo, Commented Apr 1, 2021 at 19:45

Sysix · Accepted Answer · 2021-04-01 20:14:55Z

0

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

edited Apr 1, 2021 at 20:14

answered Apr 1, 2021 at 19:45

Sysix

1,8341 gold badge20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript: Why doesnt classList.remove work? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related