toggle button not functioning-CodePudding

I'm creating a to-do list app for my portfolio and I'd like to add a dark-mode feature for my body/background. however, my toggle button looks fine but the switch doesn't seem to function and I can't seem to figure out why anyone sees anything wrong or that may be interfering?

function dark() { // setting up dark-mode 
  var element = document.body;
  element.classList.toggle("dark-mode"); //dark-mode class
}

label {
  margin: 10px;
  cursor: pointer;
  width: 50px;
  height: 30px;
  display: block;
  border-radius: 50px;
  position: relative;
  color: white;
}

.switch {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 10px;
  margin: 0 10px;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: aqua;
  transition: .4s;
  border-radius: 35px;
  ;
}

.switch input {
  display: none
}

.slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 5px;
  bottom: 5px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50px;
}

input:checked .slider {
  background-color: blue;
}

input:checked .slider::before {
  transform: translateX(0px);
}

input:checked .slider::after {
  transform: translateX(8px);
}

<div >
  <label for="switch">
        <input type="checkbox" onclick="dark()" checked>
        <span ></span>
        </label>
</div>

CodePudding user response：

Now, It's working fine after doing some modification and adding few properties for dark mode. Hope you like it. Thanks.

function dark() { // setting up dark-mode 
  var element = document.body;
  element.classList.toggle("dark-mode"); //dark-mode class
}

label {
  margin: 10px;
  cursor: pointer;
  width: 50px;
  height: 30px;
  display: block;
  border-radius: 50px;
  position: relative;
  color: white;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 30px;
  margin: 0 10px;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: aqua;
  transition: .4s;
  border-radius: 35px;
}

.switch input {
  display: none
}

.slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 5px;
  bottom: 5px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50px;
}

input:checked .slider {
  background-color: blue;
}

input:checked .slider::before {
  transform: translateX(20px);
}

/*input:checked .slider::after {
  transform: translateX(20px);
}*/

/*FOR DARK MODE*/
.dark-mode {
  background-color: #666666;
  color: yellow;
  font-family: sans-serif;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toggle</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div >
        <label >
            <input type="checkbox" onclick="dark()" checked>
            <span ></span>
        </label>
    </div>

    <!-- DARK MODE EFFECT ON PARAGRAPH -->
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <script src="app.js"></script>
</body>
</html>

CodePudding user response：

You can Try This code

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked   .slider {
  background-color: #2196F3;
}

input:focus   .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked   .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

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

CodePudding user response：

Maybe it will solve your problem

    input:checked   .slider::before {
     transform: translateX(20px);
    }

CodePudding user response：

Try to put the onclick event handler on the label. Then, you also need to toggle the checked attribute on your input. You need to find the correct input element and toggle the checked attribute.

You also need to adjust the x-position of the slider when the input is checked

input:checked .slider::before {
 transform: translateX(20px); // was 0px before
}

function dark() { // setting up dark-mode
  console.log('dark'); 
  const element = document.body;
  const input = document.getElementsByTagName('input')[0];
  if(input.hasAttribute('checked')){
    input.removeAttribute('checked');
  }else{
    input.setAttribute('checked',true);
  }
  

  element.classList.toggle("dark-mode"); //dark-mode class
}

label {
  margin: 10px;
  cursor: pointer;
  width: 50px;
  height: 30px;
  display: block;
  border-radius: 50px;
  position: relative;
  color: white;
}

.switch {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 10px;
  margin: 0 10px;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: aqua;
  transition: .4s;
  border-radius: 35px;
  ;
}

.switch input {
  display: none
}

.slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 5px;
  bottom: 5px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50px;
}

input:checked .slider {
  background-color: blue;
}

input:checked .slider::before {
  transform: translateX(20px);
}

input:checked .slider::after {
  transform: translateX(8px);
}

<div >
  <label for="switch" onclick="dark()">
    <input type="checkbox" checked>
    <span ></span>
  </label>
</div>