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

Question

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>

GetElementsByClassName returns a collection of elements. A collection does not have a clasdList. Did you check the browser console for the error you get when running your code — Bravo, Jun 30 '22 at 15:06
Even better than the answers here: use [`classList.toggle(className, force)`](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle#parameters) to do the toggling in one line. `header.classList.toggle("dark", this.checked);` — Heretic Monkey, Jun 30 '22 at 15:18
Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Heretic Monkey, Jun 30 '22 at 15:19

score 1 · Answer 1 · answered Jun 30 '22 at 15:08

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>

Ivan_OFF · Answer 2 · 2022-06-30T15:12:22.257

1

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.

edited Jun 30 '22 at 15:12

answered Jun 30 '22 at 15:11

Ivan_OFF

193
7

score 1 · Answer 3 · answered Jun 30 '22 at 15:12

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.

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

3 Answers3