I have the following jQuery code that I am attempting to remove and convert into standard JavaScript:
$('.switch').click(()=>{
$([".light [class*='-light']", ".dark [class*='-dark']"]).each((i,ele)=>{
$(ele).toggleClass('bg-light bg-dark')
$(ele).toggleClass('text-light text-dark')
$(ele).toggleClass('navbar-light navbar-dark')
})
$('body').toggleClass('light dark')
})
This is my updated version:
for (let s of [".light [class*='-light']", ".dark [class*='-dark']"]) {
document.querySelectorAll(s).forEach((element, index) => {
element.classList.toggle('bg-light bg-dark')
element.classList.toggle('text-light text-dark')
element.classList.toggle('navbar-light navbar-dark')
})
}
document.querySelector("body").classList.toggle('light dark');
However, when I test this code, I get an error message:
Failed to execute 'toggle' on 'DOMTokenList': The token provided ('light dark') contains HTML space characters, which are not valid in tokens
If anyone can spot what's wrong with this or my revised code, I would greatly appreciate it. I'm new to Vanilla JS. Thank you!