Checkbox classList Toggle-CodePudding

I am trying to use a custom slider with an input type=checkbox to toggle between dark-mode and light-mode. It is not working with the javascript code I have.

Javascript

var checkbox = document.getElementById('checkbox');
checkbox.addEventListener('change', themeChange);

function themeChange(){
  if (checkBox.checked == true){
    document.getElementById('body').classList.toggle('dark-mode');
  } else {
    document.getElementById('body').classList.toggle('light-mode');
  }
}

HTML

<label >
   <input id="checkbox" type="checkbox" >
   <span ></span>
</label>

  <body id='body'>
</body>

CSS

.dark-mode {
  background-color: black;
  color: white;
}

.light-mode {
  background-color: white;
  color: black;
}

CodePudding user response：

toggle won't remove different the classes, you have to add and remove, please check the working code below.

var checkbox = document.getElementById('checkbox');
checkbox.addEventListener('change', themeChange);

function themeChange(){
  
  if (checkbox.checked == true){
    document.getElementById('body').classList.add('dark-mode');
    document.getElementById('body').classList.remove('light-mode');
  } else {
    document.getElementById('body').classList.add('light-mode');
    document.getElementById('body').classList.remove('dark-mode');
  }
}

.dark-mode {
  background-color: black;
  color: white;
}

.light-mode {
  background-color: white;
  color: black;
}

<label >
   <input id="checkbox" type="checkbox" >
   <span ></span>
</label>

<body id='body'>
    Theme switcher
</body>

CodePudding user response：

.toggle() will remove and add one single class. Try it this way instead

function themeChange(){
  if (checkBox.checked == true){
    document.getElementById('body').classList.add('dark-mode');
    document.getElementById('body').classList.remove('light-mode');
  } else {
    document.getElementById('body').classList.remove('dark-mode');
    document.getElementById('body').classList.add('light-mode');
}

CodePudding user response：

Maybe this one?

    var checkbox = document.getElementById('checkbox');
    checkbox.addEventListener('change', ()=>{
      if (checkbox.checked == true){
        document.getElementById('body').classList.toggle('dark-mode',true);
        document.getElementById('body').classList.toggle('light-mode',false);
      } else {
        document.getElementById('body').classList.toggle('dark-mode',false);
        document.getElementById('body').classList.toggle('light-mode',true);
      }
    } )

    .dark-mode {
      background-color: black;
      color: white;
    }
    
    .light-mode {
      background-color: white;
      color: black;
    }

    <label >
       <input id="checkbox" type="checkbox" >
       <span ></span>
    </label>

      <body id='body'>
    </body>

CodePudding user response：


var checkbox = document.getElementById('checkbox');

console.log(checkbox.valueOf());
checkbox.addEventListener('change', themeChange);

function themeChange(){
    if (checkbox.checked == true){
        document.getElementById('body').classList.add('dark-mode');
    } else {
        document.getElementById('body').classList.add('light-mode');
    }
}

CodePudding user response：

You can check below snippet.

var body = document.getElementById('body');
var checkbox = document.getElementById('checkbox');
checkbox.addEventListener('change', themeChange);

function themeChange(){
  if (checkbox.checked){
    body.classList.remove('light-mode');
    body.classList.add('dark-mode');
  } else {
    body.classList.add('light-mode');
    body.classList.remove('dark-mode');
  }
}

.dark-mode {
  background-color: black;
  color: white;
}

.light-mode {
  background-color: white;
  color: black;
}

<body id='body'>

<label >
   <input id="checkbox" type="checkbox" >
   <span ></span> Dark/Light Mode
</label>

</body>

CodePudding user response：

Try it this way instead

var checkBox = document.getElementById('checkbox');
let body =  document.getElementById('body');
let i =2;


checkbox.addEventListener('change', ()=>{
if (i%2==0){
   div.classList.toggle('dark-mode');
  } else {
    div.classList.toggle('light-mode');

  }
});

CodePudding user response：

I noticed some problem:

You must wrap all elements in the <body> element.
You don't need to give the id attribute to select the <body> element.
Before you define a function, you should not bind it to an event. First define the function then bind the predefined function to an event.
For the toggle() method to work properly, you must apply the .light-mode class style to the <body> element by default.
You don't need to check the checkbox as it is a toggle check.

var checkbox = document.getElementById('checkbox');

function themeChange() {
  document.body.classList.toggle("light-mode");
  document.body.classList.toggle("dark-mode"); 
}

checkbox.addEventListener('change', themeChange);

.dark-mode {
  background-color: black;
  color: white;
}
.light-mode {
  background-color: white;
  color: black;
}

<!-- By default, the "light-mode" style was applied to the <body> element. -->
<body >
  <label >
    <input id="checkbox" type="checkbox" >
    <span ></span>
  </label>
</body>

To apply the toggle() method to multiple class styles simultaneously, you can update the themeChange() method as follows:

function themeChange() {
  ["light-mode", "dark-mode"].map(cn => document.body.classList.toggle(cn));
}