I'm trying to make a button remove or add a class in the body, however it's giving the following error when clicking the "Uncaught TypeError: Can not read property 'classList' of null"
var body = document.querySelector('div.single-news');
var button = document.querySelector('button#skin-btn');
button.addEventListener('click', function() {
body.classList.toggle('light-skin');
});
The ideal would be to make the code with pure JS.
Updated with HTML:
var menu = document.querySelector('div.single-news');
var button = document.querySelector('button#skin-btn');
botao.addEventListener('click', function() {
var open = menu.classList.contains('light-skin');
menu.classList.toggle('light-skin');
});<body class="entry-header single-news">
<button class="night-mode-btn" id="skin-btn">
<span class="night-mode-btn__text">Modo noturno</span>
</button>
<h1 class="entry-title">
{{ post.title }}
</h1>
<time class="entry-postedon">
<span class="screen-reader-text">Publicado em</span>
{{ post.post_date|date("j \d\e F \d\e Y") }} às {{ post.time|date("H\hi") }}
</time>
{% if post.thumbnail %}
<div class="entry-cover-image">
<img data-dynsrc="['{{ post.thumbnail.src('img-16x9-760x428') }}']" data-fullscreen-url="{{ post.thumbnail.src('large') }}">
</div>
{% endif %}
</body>