How to make a toggle switch word in HTML, CSS and Javascript (vanilla)
Question
I have run into a roadblock trying to get this to work. I am attempting to create a switch that toggles an action on/off. For example, when a user toggles on the switch the switch will do Javascript action when it is on the on position and will turn off when the switch is toggled to the off position. That is ultimately my end goal with this. What can I do to make this work, I have been doing trial and error for the last maybe 10 daysish?? What can I say? I am determined. Here is the code, any help is appreciated! Thank you everyone. <3
<!DOCTYPE>
<html>
<body>
<label class = 'switch'>
<input type = 'checkbox' id = 'yet'>
<span class = 'slider'></span>
</label>
</body>
<style>
.switch {
display: inline-block;
position: absolute;
height: 30px;
width: 60px;
}
#yet{display: none;}
.slider {
top: 1px;
bottom: 0px;
left: 0px;
right: 0px;
position: absolute;
cursor: pointer;
background-color: #D00005;
-webkit-transition: .3s;
border-radius: 25px;
}
.slider:before {
cursor: pointer;
position: absolute;
height: 26px;
width: 26px;
bottom: 2px;
left: 4px;
border-radius: 100%;
content: "";
background-color: #000000;
-webkit-transition: .3s;
}
#yet:checked+.slider {
background-color: #16AA03;
}
#yet:checked+.slider:before {
-webkit-transform: translateX(26px);
}
</style>
<script>
function myBird() {
document.body.style.backgroundColor = '#000000';
}
function myRed() {
document.body.style.backgroundColor = '#FFFFFF';
}
</script>
</html>
1 answers
solution1
0 ACCPTED 2020-10-31 09:26:50
Use an onClick event handler , checking the value of this.checked to know whether the input is checked or not.
HTML:
<input type = 'checkbox' id = 'yet' onclick='handleClick(this)'>
JavaScript:
function handleClick(cb) {
if (cb.checked) {
myBird();
} else {
myRed();
}
}
function myBird() {
document.body.style.backgroundColor = '#000000';
}
function myRed() {
document.body.style.backgroundColor = '#FFFFFF';
}
All together with CSS:
function handleClick(cb) { if (cb.checked) { myBird(); } else { myRed(); } } function myBird() { document.body.style.backgroundColor = '#000000'; } function myRed() { document.body.style.backgroundColor = '#FFFFFF'; }
.switch { display: inline-block; position: absolute; height: 30px; width: 60px; } #yet { display: none; } .slider { top: 1px; bottom: 0px; left: 0px; right: 0px; position: absolute; cursor: pointer; background-color: #D00005; -webkit-transition: .3s; border-radius: 25px; } .slider:before { cursor: pointer; position: absolute; height: 26px; width: 26px; bottom: 2px; left: 4px; border-radius: 100%; content: ""; background-color: #000000; -webkit-transition: .3s; } #yet:checked+.slider { background-color: #16AA03; } #yet:checked+.slider:before { -webkit-transform: translateX(26px); }
<label class = 'switch'> <input type = 'checkbox' id = 'yet' onclick='handleClick(this)'> <span class = 'slider'></span> </label>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.