check if my body tag has a class, in vanilla JS

Question

I am trying to simply show/hide content; by creating an if statement in plain JS to detect if the current body tag has a specific class attached; i.e. home

I am trying the below; on the correct page, but am not getting the alert.

var elem = document.querySelector('body');

if (elem.classList.contains('test')) {
    alert('test');
}

no jQuery!!

error with the above code is:

Uncaught TypeError: Cannot read property 'classList' of null

I just want this to run on page load

Make sure you are running this method after the DOM content has loaded — Sushanth --, Mar 05 '19 at 23:01
So are you getting an error? When is the code run? Code looks like it should work so it has to be something else. — epascarello, Mar 05 '19 at 23:02
Possible duplicate of [What is the "hasClass" function with plain JavaScript?](https://stackoverflow.com/questions/5085567/what-is-the-hasclass-function-with-plain-javascript) — imvain2, Mar 05 '19 at 23:03
Please, can you share where is placed that code in your HTML code? — Ele, Mar 05 '19 at 23:12

score 0 · Answer 1 · answered Mar 06 '19 at 01:30

As long as you wait for the DOMContentLoaded event you should be golden. Check out the tests below.

NOTE: Snippet engine is NOT a good test for this, the HTML is always ready :)

document.addEventListener('DOMContentLoaded', () => {
  console.log(document.body.classList);
  console.log(document.body.className);
  if(document.body.classList.length > 0) {
    console.log(document.body.className);
  }

});

<body class="testing test2">

<p>Hello world</p>

</body>

check if my body tag has a class, in vanilla JS

1 Answers1