Adding a class to body if another element has a class 'active'

Question

I have a button called .burger which is given an additional class called active that toggles on click.

HTML

<div class="burger"></div>

JS

var element = document.querySelector('.burger');
element.onclick = function() {
  element.classList.toggle('visible');
}

This is working nicely but what I'd like to do is add an event listener which gives the body tag a class of .disable-scroll whenever .burger has the class active .

How would I achieve this with vanilla javascript? I'm learning, so I apologise if my terminology isn't quite right.

Answer 1

there is no need for another event that listen for the changing inside this button you could just toggle the body class inside the same event

  var element = document.querySelector('.burger');
  var bodyEl = document.querySelector('body');

  element.onclick = function() {
     element.classList.toggle('visible');
     
     if (element.classList.contains("active"))
        bodyEl.classList.add('.disable-scroll');
     else bodyEl.classList.remove('.disable-scroll');
  }

or you could simplify it as @3limin4t0r mentioned like this one

 var element = document.querySelector('.burger'); var bodyEl = document.querySelector('body'); element.onclick = function() { const isAdded = element.classList.toggle("visible"); bodyEl.classList.toggle("disable-scroll", isAdded); }

 .visible { background-color: green; }

 <button class="burger">Burger Button</button>

Answer 2

Well, you can use MutationObserver to listen to DOM updates and trigger a callback when a particular body has a particular class that is being added, but I wouldn't recommend you to go this way...

It would make your code cleaner to find where you add .active to .burger , and there, add .disable-scroll to body

Answer 3

Try this:

 element.classList.contains('active')? document.querySelector('body').classList.add('disable-scroll'): document.querySelector('body').classList.remove('disable-scroll')

This will check if element has .active class then add or remove .disable-scroll

Answer 4

You could use MutationObserver like this:

 var element = document.querySelector('.burger'); element.onclick = function () { element.classList.toggle('visible'); } const observer = new MutationObserver(({ target, attributeName }) => document.body.classList.toggle('disable-scroll', attributeName === 'class' && target.classList.contains('visible'))); observer.observe(element, { attributes: true });

 .visible { background-color: green; }

 <div class="active burger">Burger</div>

Answer 5

My suggestion (using arrow function and ternary operator ):

 var el = document.querySelector(".burger"), bodyEl = document.querySelector("body"); el.onclick = () => { el.classList.toggle("visible"), el.classList.contains("active")? bodyEl.classList.add(".disable-scroll"): bodyEl.classList.remove(".disable-scroll") };

 .visible { background-color: orange; }

 <button class="burger">Burger Button</button>