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

user_14182647 0
Viewed 158

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.

javascript
5 Answers

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>

user_119605980

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

user_81868980

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

user_130647780

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>

user_37381710

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>

user_106680520
Related