dimanche 1 novembre 2020

How do i make checkbox element toggle on/off and change CSS classes/ids in Javascript [duplicate]

So i have been struggling with this for hours upon hours. I have been stuck with this for so long that i am slowly going insane. I cant recall how many times i rewrote this in different forms.

The toggle is suppose to activate "nightmode" by simply changing the classes. I have been able to chance classes/id with a simply button but couldnt make it toggle. I havent been able to do it with a "checkbox" type either.

HTML

<input type="checkbox" id="checkbox" onclick="togglenightmode">`

Javascript

var bodyclass = document.getElementsByClassName("body");

var checkboxtoggle = document.getElementById("checkbox");
 
 function togglenightmode(){
     if (checkboxtoggle.checked === false){
         bodyclass.setAttribute("class", "body");
         console.log("Nightmode is OPEN");   
     } else 
     if (checkboxtoggle.checked === true){
         bodyclass.setAttribute("class", "body-nm");
         console.log("Nightmode is CLOSED");   
    } 
}

CSS

.body {
    background-color: #eee;
}

.body-nm {
    background-color: #FFFFFF;
}

any help would be appreciated




Aucun commentaire:

Enregistrer un commentaire