<section id="menu">
<div class="logo">
<img src="images/logo.png" alt="" />
<h2>Dynamic</h2>
</div>
<div class="items">
<li><i class="fad fa-chart-pie-alt"></i><a href="#">Dashboard</a></li>
<li><i class="fab fa-uikit"></i><a href="#">UI Elements</a></li>
<li><i class="fas fa-th-large"></i><a href="#">Tables</a></li>
<li><i class="fas fa-edit"></i><a href="#">Forms</a></li>
<li><i class="fab fa-cc-visa"></i><a href="#">Cards</a></li>
<li><i class="fas fa-hamburger"></i><a href="#">Modal</a></li>
<li><i class="fas fa-chart-line"></i><a href="#">Blank</a></li>
</div>
</section>
const checkbox = document.getElementById("checkbox");
checkbox.addEventListener("change", () => {
menu.classList.toggle("dark");
document.body.classList.toggle("dark");
});
I tried using document.getElementById("h2").className += "dark";
but nothing is happening, what am i doing wrong
it should work like you wished but be aware of that it will find every H2 element and it will change them.
var elements = document.getElementsByTagName("H2");
for (var step = 0; step < elements.length; step++) {
elements[step].classList.add("dark");
}