create a switch button in javascript

To create a switch button in JavaScript, you can use HTML and CSS to create the button and then use JavaScript to add the event listener to toggle the button on and off.

HTML


<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>
95 chars
5 lines

CSS


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

.switch input {
  display: none;
}

.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 {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
760 chars
55 lines

JavaScript


const toggleSwitch = document.querySelector('.switch input[type="checkbox"]');

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
    }
    else {
        document.documentElement.setAttribute('data-theme', 'light');
    }    
}

toggleSwitch.addEventListener('change', switchTheme, false);
364 chars
13 lines

In the above example, we first select the input checkbox in the switch button and then create a function called switchTheme that checks the state of the checkbox and sets the theme of the page depending on whether the checkbox is checked. Finally, we add an event listener to the checkbox that listens for a change event and executes the switchTheme function when the checkbox state changes.

similar javascript code snippets

write a switch in swift in javascript

how to create fibonacci in javascript

how to use useeffect in javascript

how to create a proxy variable in javascript

how to parse a json string in javascript

loop in javascript

how to use usestate in javascript

create a loop in javascript

loop from 1 to 10 in javascript

create a react context in javascript

related categories