Switching between two background colors

Question

My code works fine I just need to switch between two colors white and black colors.

document.getElementById("switch").addEventListener("click", function() {
  document.getElementsByClassName("mainWrapper fullWidth")[0].style.backgroundColor = document.getElementById("switch").toggle ? "white" : "black";
});

h1 {
  color: green;
}


/* toggle in label designing */

.toggle {
  float: none;
  position: fixed;
  display: inline-block;
  width: 80px;
  height: 38px;
  background-color: grey;
  border-radius: 30px;
  border: 2px solid white;
  top: 6px;
 /*  left: 896px; */
}


/* After slide changes */

.toggle:after {
  content: " ";
  position: absolute;
  width: 38px;
  height: 35px;
  border-radius: 50%;
  background-color: white;
  top: -1px;
  left: 0px;
  transition: all 0.5s;
}


/* Toggle text */

p {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}


/* Checkbox cheked effect */

.checkbox:checked+.toggle::after {
  left: 38px;
}


/* Checkbox cheked toggle label bg color */

.checkbox:checked+.toggle {
  background-color: #5ad94d;
}


/* Checkbox vanished */

.checkbox {
  display: none;
}

<input class='checkbox' id='switch' type='checkbox' />
<label class='toggle' for='switch'><p>ON   OFF</p></label>

`document.getElementById("switch")` <= it cannot be working fine — Taplar, Dec 11 '20 at 18:47
I need help to modify the JavaScript code to switch between white and black colors @iota — user14775523, Dec 11 '20 at 18:49
_"@Taplar i'm using blogger , it works"_ if you are using some special platform where this is valid syntax, you should probably include a tag for the platform and specify that in the question. — Alexander Nied, Dec 11 '20 at 18:56
I tried to make a snippet of your encoded html and script. Please fix it into a [mcve] - for example I had to comment out the toggle left and you are missing the mainwrapper — mplungjan, Dec 11 '20 at 18:57
`document.querySelector(".mainWrapper.fullWidth").style` your selector was wrong — mplungjan, Dec 11 '20 at 19:00
Welcome to SO! I always recommend new users review [ask] to get tips on best forming their questions so the community is able to assist them. This question is a bit vague; it will be difficult for anyone to give you meaningful guidance. Can you reduce your code to an [mcve]? Then state the expected behavior, the actual behavior, and whether there is any error messaging surfaced? — Alexander Nied, Dec 11 '20 at 19:00
@mplungjan , don't make it a big deal I just need a JavaScript code with if and else statement to switch between 2 colors — user14775523, Dec 11 '20 at 19:03
@AlexanderNied I just need a JavaScript code with if and else statement to switch between 2 colors — user14775523, Dec 11 '20 at 19:03

mplungjan · Accepted Answer · 2020-12-11T19:11:02.150

You needed to fix the code.

this.checked instead of .toggle and there was no mainwrapper - the selector was wrong

You might consider a class and do

document.querySelector(".mainWrapper").classList.toggle("black",!this.checked)

but here is your code fixed

document.getElementById("switch").addEventListener("click", function() {
  document.querySelector(".mainWrapper").style.backgroundColor = this.checked ? "white" : "black";
});

body { height: 100%; }

h1 {
  color: green;
}


/* toggle in label designing */

.toggle {
  float: none;
  position: fixed;
  display: inline-block;
  width: 80px;
  height: 38px;
  background-color: grey;
  border-radius: 30px;
  border: 2px solid white;
  top: 6px;
  left: 296px;
}


/* After slide changes */

.toggle:after {
  content: " ";
  position: absolute;
  width: 38px;
  height: 35px;
  border-radius: 50%;
  background-color: white;
  top: -1px;
  left: 0px;
  transition: all 0.5s;
}


/* Toggle text */

p {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}


/* Checkbox cheked effect */

.checkbox:checked+.toggle::after {
  left: 38px;
}


/* Checkbox cheked toggle label bg color */

.checkbox:checked+.toggle {
  background-color: #5ad94d;
}


/* Checkbox vanished */

.checkbox {
  display: none;
}

.mainWrapper {
    height: 100vh;
    background-color: black;
}

<input class='checkbox' id='switch' type='checkbox' />
<label class='toggle' for='switch'><p>ON   OFF</p></label>

<div class="mainWrapper fullWidth">
  <h1>Here</h1>
</div>

I suggest `document.querySelector(".mainWrapper").classList.toggle("black",!this.checked)` instead — mplungjan, Dec 11 '20 at 19:11

Switching between two background colors

1 Answers1