How to change between 2 background colors using JavaScript with one button

Question

I posted a question similar to this and the solution people provided worked, but it only worked when I comment out all my other CSS code. For some reason, the CSS is interfering with the JavaScript function to work properly. I want to change the background color to black when I click the button, but I want to change it back to white when I click on it again.

<!DOCTYPE html>
<html>
<head>
  <title>Light Switch</title>
  <link rel="stylesheet" href="light.css" />
</head>

<body id="body">
  <div id="click">
    <label id="switch">
      <input type="checkbox" checked>
      <span class="slider"></span>
    </label>
  </div>
<script src="light.js"></script>
</body>
</html>

#switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin: 0 auto;
}

#switch input {
  display: none;
}

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

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

input:checked + .slider {
   background-color: #1583ea;
}

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

function start() {
  var click = document.getElementById("switch");
  click.addEventListener("click", toggle);
};

function toggle() {
  var color = document.getElementById("body");
  var backColor = color.style.backgroundColor;
  color.style.backgroundColor = backColor === "black" ? "white" : "black";
};


start();

Do a `console.log(backColor)` and make sure it is the value you were looking for. My guess is it's not. That should solve your problem. — Lansana Camara, Mar 16 '18 at 17:04

score 4 · Accepted Answer · answered Mar 16 '18 at 17:12

Your function was triggering twice due to the event listener on the switch div as opposed to the slider itself. I refactored your code a bit.

function start() {
  var toggleSwitch = document.getElementById("slider");
  toggleSwitch.addEventListener("click", toggle);
};

function toggle() {
  var backColor = document.body.style.backgroundColor;
  document.body.style.backgroundColor = backColor === "black" ? "white" : "black";
};


start();

#switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin: 0 auto;
}

#switch input {
  display: none;
}

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

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

input:checked + .slider {
   background-color: #1583ea;
}

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

<!DOCTYPE html>
<html>
<head>
  <title>Light Switch</title>
  <link rel="stylesheet" href="light.css" />
</head>

<body>
  <div>
    <label id="switch">
      <input type="checkbox" checked>
      <span id="slider" class="slider"></span>
    </label>
  </div>
<script src="light.js"></script>
</body>
</html>

interesting... now i'm curious, why the event is triggering twice when you put it on the _label_ tag? — Jon Koala, Mar 16 '18 at 17:31
@JonKoala https://stackoverflow.com/questions/24501497/why-the-onclick-element-will-trigger-twice-for-label-element — blastitall, Mar 16 '18 at 18:30
@blastitall ty! My first thought was event bubbling too, but it seems to be something different, check this answer to a similar question: https://stackoverflow.com/a/17185362/1269898 — Jon Koala, Mar 16 '18 at 18:45

score 1 · Answer 2 · answered Mar 16 '18 at 17:04

1

You want to use a .toggle, specifically, classList.toggle("my-black");

var button = document.getElementsByTagName("button")[0];
var body = document.body;
button.addEventListener("click", function(evt){
   body.classList.toggle("my-black");
});

.my-black{
 background:#424242;
}
html,body{
height:100%;
width:100%;
}

<button>asdfasdf</button>

answered Mar 16 '18 at 17:04

Ronnie Royston

16,778
6
77
91

Ive already tried using the classList.toggle property, and I have the same problem. it works when I dont apply my other CSS code – inDepth Mar 16 '18 at 17:09
use browser develop tools inspector and right click over your background and click 'inspect' then check where the color is coming from (which CSS is overriding) – Ronnie Royston Mar 16 '18 at 17:11

How to change between 2 background colors using JavaScript with one button

2 Answers2