Need to add a class when a checkbox is checked in javacript-CodePudding

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 >
            <div >
                <h1>Social Media Dashboard</h1>
                <p>Total Followers: 23,004</p>
            </div>
            <div >
                <label for="switch" id="switchlabel">Dark Mode</label>
                <input type="checkbox" name="switch" id="switch">
            </div>
</div>

CodePudding user response：

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 >
            <div >
                <h1>Social Media Dashboard</h1>
                <p>Total Followers: 23,004</p>
            </div>
            <div >
                <label for="switch" id="switchlabel">Dark Mode</label>
                <input type="checkbox" name="switch" id="switch">
            </div>
</div>

CodePudding user response：

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.

CodePudding user response：

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 >
                <h1>Social Media Dashboard</h1>
                <p>Total Followers: 23,004</p>
            </div>
            <div >
                <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.