i'm challenging myself by creating a website that have a dark and light mode.
When the checkbox is checked, it add the class "light" on the header for example, dark is default mode.
I've created a script but i didn't found the solution and why it's not working, can someone help me in this direction?
Here is my code:
let header = document.getElementsByClassName('header');
let switcher = document.querySelector('#switch');
switcher.addEventListener('click',function(){
if(this.checked){
header.classList.add('light');
}
else{
header.classList.remove('light');
}
})<div class="header ">
<div class="title-section">
<h1>Social Media Dashboard</h1>
<p>Total Followers: 23,004</p>
</div>
<div class="switchbtn">
<label for="switch" id="switchlabel">Dark Mode</label>
<input type="checkbox" name="switch" id="switch">
</div>
</div>Almost, you were just missing an index for document.getElementsByClassName. This returns an array of matching items. Because you've only got one you can just get the first in the array no problem.
So all you need to change is:
document.getElementsByClassName to document.getElementsByClassName[0]
and you're good to go!
let header = document.getElementsByClassName('header')[0];
let switcher = document.querySelector('#switch');
switcher.addEventListener('click',function(){
if(this.checked){
header.classList.add('light');
}
else{
header.classList.remove('light');
}
})<div class="header ">
<div class="title-section">
<h1>Social Media Dashboard</h1>
<p>Total Followers: 23,004</p>
</div>
<div class="switchbtn">
<label for="switch" id="switchlabel">Dark Mode</label>
<input type="checkbox" name="switch" id="switch">
</div>
</div>You can access the HTML of the header entering inside the collection, so try using
getElementsByClassName('header')[0].
I prefer using querySelector() for adding and removing classes, it's simpler.
I made some changes to the code so that you can have a base and start working. I changed getelementsbyclassname to getElementById since the first one will return an array of all elements with this class name.
let header = document.getElementById("header");
let switcher = document.querySelector('#switch');
switcher.addEventListener('click',function(){
if(this.checked){
header.classList.add("dark");
}
else{
header.classList.remove("dark");
}
}).dark {
color: white;
background: black;
}<div id="header">
<div class="title-section">
<h1>Social Media Dashboard</h1>
<p>Total Followers: 23,004</p>
</div>
<div class="switchbtn">
<label for="switch" id="switchlabel">Dark Mode</label>
<input type="checkbox" name="switch" id="switch">
</div>
</div>Also, I made it white as default and dark when you click. Hope it helps.