CODEWITHSUNDEEP
javascripthtmlinputcheckboxclick
Bruhat Melvin
Bruhat Melvin

Reputation: 50

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

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>

Upvotes: 0

Views: 175

Answers (3)

Ricardo Silva
Ricardo Silva

Reputation: 139

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.

Upvotes: 1

Ivan_OFF
Ivan_OFF

Reputation: 357

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.

Upvotes: 1

styles0121
styles0121

Reputation: 53

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>

Upvotes: 1

Related Questions