I’ve created a dark/night toggle for my website (built on Webflow, toggle button is in the ‘Explore’ menu) but wish to exclude certain items if a certain class (‘no-toggle’) is present. I’m assuming I can use .contains() or .includes() but unsure how to correctly implement them, or if that’s even the correct way (I’m still quite new to JS).

Below is the code which works perfectly for the toggle.

I’m thinking a NOT operator within the elToggle function would work, but can’t seem to get it functional.

const buttons = document.querySelectorAll('.mode-toggle')
const items = ['a', 'p', 'h1', 'h2', 'h3', '.home-hero_logo', '.qm-icon_hero', '.qm_lottie', '.menu_bg', '.mode-toggle', '.toggle_circle', '.navbar'];
console.log(items);

const elToggle = function() {
  for(item of items) {
    // Unsure how to implement correctly
    if(!document.body.item.classList.contains('no-toggle')){
        document.querySelectorAll(`${item}`).forEach(element => element.classList.toggle('light'));
    }
  }
}   

// toggle button
buttons.forEach(button => {
  button.addEventListener('click', function () {
    document.body.classList.toggle('light-mode')
    document.querySelector('.mode-toggle').classList.toggle('night-off')
    elToggle();

    if (document.body.classList.contains('light-mode')) {
      localStorage.setItem('lightMode', 'enabled')
    } else {
      localStorage.setItem('lightMode', 'disabled')
    }
  })
})

// store toggle state within session
if (localStorage.getItem('lightMode') === 'enabled') {
  document.body.classList.add('light-mode')
  document.querySelector('.mode-toggle').classList.toggle('night-off')
  elToggle();
}

Any help is appreciated.