Menu
<script>
document.getElementsByName("checkbox").onclick = function() {myFunction()};
function myFunction() {
document.body.style.backgroundColor = "black";
}
</script><style>
.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 {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
body {
background-color: red;
}
</style><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.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 {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
body {
background-color: red;
}
</style>
<meta charset="utf-8">
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label><br>
<script>
document.getElementsByName("checkbox").onclick = function() {myFunction()};
function myFunction() {
document.body.style.backgroundColor = "black";
}
</script>
</body>
</html> I'm a bit of noob here, but I have this toggle switch that I want to change the whole body background which is currently red to black when I click it. But for some reason, my script doesn't work. Can someone explain what I'm doing wrong?
236
asked Dec 09 '25 17:12
The problem your code has is the click event is not registered with the checkbox because you are using the wrong method to get the element. Trying using id instead getElementById. Below is a solution. Hope this helps.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.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 {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
body {
background-color: #BB9797;
}
</style>
<meta charset="utf-8">
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<input id="toggleSwitch" type="checkbox">
<span class="slider"></span>
</label><br>
<script>
document.getElementById("toggleSwitch").onclick = function() {
myFunction()
};
function myFunction() {
let color = document.body.style.background;
if (color === 'black') {
document.body.style.background = "#BB9797";
} else {
document.body.style.background = "black";
}
}
</script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
