JSFiddle - React, Tailwind, and code Playground

by Darko

HTML

<button class="btn-add-class">
  Add
</button>

<button class="btn-remove-class">
  Remove
</button>

<button class="btn-add-class">
  Add
</button>

<button class="btn-remove-class">
  Remove
</button>

CSS

.foobar {
  background-color: yellow;
}

JavaScript

const add_body_class = document.querySelectorAll('.btn-add-class');

add_body_class.forEach(item => {
  item.addEventListener('click', event => {
     document.body.classList.add('foobar');
  })
});

const remove_body_class = document.querySelectorAll('.btn-remove-class');

remove_body_class.forEach(item => {
  item.addEventListener('click', event => {
     // this doesn't work
     document.body.classList.remove('foobar');
     // click event works
     console.log("clicked");
  })
});