科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Change background color using toggle switch - Stack Overflow

    javascript - Change background color using toggle switch - Stack Overflow

    programmeradmin3浏览0评论

    <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> 

    <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?

    • javascript
    • html
    • css
    Share Improve this question edited Oct 8, 2018 at 3:26 ShadowZ asked Oct 8, 2018 at 3:20 ShadowZShadowZ 731 silver badge5 bronze badges 1
    • You should try: document.getElementsByName("checkbox")[0].onclick = function() {myFunction()}; – Hanif Commented Oct 8, 2018 at 3:22
    Add a ment  | 

    5 Answers 5

    Reset to default 4

    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>

    You should make 2 change here:

    Firstly you should add array index number when you typing like document.getElementsByName("checkbox")[0] because getElementsByName return array: 

    document.getElementsByName("checkbox")[0].onclick = function() {myFunction()};

    Secondly you should add name attribute add in checkbox because you selecting element by getElementsByName but it is absent in your element:

    <label class="switch">
  <input type="checkbox" name="checkbox">
   <span class="slider"></span>
</label>


    <!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 type="checkbox" name="checkbox">
  <span class="slider"></span>
</label><br>

<script>
var checkbox = document.getElementsByName("checkbox")[0];
checkbox.onclick = function() {myFunction()};

function myFunction() {
	if(checkbox.checked) { document.body.style.backgroundColor = "black";}
	else {document.body.style.backgroundColor = "#BB9797";}
}
</script>
</body>
</html>

    Here is updated code just I add a new Id and function please check this solution I think it will work for you 

    <!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 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 = "red";
      } else {
        document.body.style.background = "black";
      }

    }
</script>
</body>
</html>

    Another solution which, in my opinion, is a cleaner solution, is to use classList.toggle to toggle a class on the body element. This way you don't need to change any code if you need to redesign the colours. Only changes in CSS is required.

    document.getElementById("toggleSwitch").onclick = function() { myFunction() };

function myFunction() {
	document.body.classList.toggle("switch-on");
}
    .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);
}

.switch-on {
  background-color: black;
}

body {
  background-color: #BB9797;
}
    <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>

<h2>Toggle Switch</h2>

<label class="switch">
  <input id="toggleSwitch" type="checkbox">
  <span class="slider"></span>
</label><br>

</body>
</html> 

    $(document).ready(function(){
  $('.checkbox').on('click', function(){
    $('body').toggleClass('change');
  });
});
    body.change{
  background-color: black;
  color: #ffffff;
}
.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;
}
    <script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
  </head>
  <body>

  <h2>Toggle Switch</h2>

  <label class="switch">
    <input type="checkbox" class="checkbox">
    <span class="slider"></span>
  </label><br>
  </body>
</html>

    Check the above code.

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论