Change background colour with javascript with 2 colours-CodePudding

I'm trying to have a button on my webiste that if you press it the background color will change to blue which i have, but i'm trying to code that if you press it again it'll change to white again.

function myFunction() {   
document.body.style.backgroundColor= "lightblue";
}

function my1Function() {   
document.body.style.backgroundColor= "lightgrey";
}

function my2Function() {   
document.body.style.backgroundColor= "pink";
}

function my3Function() {   
document.body.style.backgroundColor= "lightgreen";
}

<header>
<h1></h1>
</header>

<br>

<form action="#">
<label for="fname">Uw naam:</label>
<input type="text" id="fname" name="fname">

<input type="submit" value="Submit">
</form>

<button type="button" onclick="myFunction()">Lightblue</button>
<button type="button" onclick="my1Function()">Lightgrey</button>
<button type="button" onclick="my2Function()">Pink</button>
<button type="button" onclick="my3Function()">Lightgreen</button>

I tried using alternatives such as case1, case2, case3 etc.

CodePudding user response：

If you are not saving the state of color on refresh or rerendering then this could be one of the solutions.

var blue = 0;
function myFunction() {   
    if(blue == 0){
  
  
    document.body.style.backgroundColor= "lightblue";
        blue = 1;
  }
  else{
    document.body.style.backgroundColor= "white";
        blue = 0;
  }
}

function my1Function() {   
document.body.style.backgroundColor= "lightgrey";
}

function my2Function() {   
document.body.style.backgroundColor= "pink";
}

function my3Function() {   
document.body.style.backgroundColor= "lightgreen";
}

<header>
<h1></h1>
</header>

<br>

<form action="#">
<label for="fname">Uw naam:</label>
<input type="text" id="fname" name="fname">

<input type="submit" value="Submit">
</form>

<button type="button" onclick="myFunction()">Lightblue</button>
<button type="button" onclick="my1Function()">Lightgrey</button>
<button type="button" onclick="my2Function()">Pink</button>
<button type="button" onclick="my3Function()">Lightgreen</button>

CodePudding user response：

All you need is:

const body = document.querySelector('body')

function myFunction() {   
  body.style.backgroundColor= "lightblue";
  if (body.style.backgroundColor !== '#fff') {
    body.style.backgroundColor = '#fff'
  }
}

function my1Function() {   
  body.style.backgroundColor= "lightgrey";
  if (body.style.backgroundColor !== '#fff') {
    body.style.backgroundColor = '#fff'
  }
}

function my2Function() {   
  body.style.backgroundColor= "pink";
  if (body.style.backgroundColor !== '#fff') {
    body.style.backgroundColor = '#fff'
  }
}

function my3Function() {   
  body.style.backgroundColor= "lightgreen";
  if (body.style.backgroundColor !== '#fff') {
    body.style.backgroundColor = '#fff'
  }
}

CodePudding user response：

You will need to check in what "state" the color is in and then change it accordingly. you can optimize the code and use more variables but the overall idea is that you should use and if statement to check the "state".

for example

function myFunction() {
const background = document.body.style.backgroundColor;
if(background  === "lightblue"){ 
  document.body.style.backgroundColor = "white";
} else {
 document.body.style.backgroundColor = "lightblue";
}

}

CodePudding user response：

You can simply just do something like this

<button onclick="document.body.style.backgroundColor = lightblue';">pink</button>

<button onclick="document.body.style.backgroundColor = pink';">pink</button>

This will work

CodePudding user response：

By clicking on the button you could add a class to the body which represents your colour. On clicking the button again you can simply check the classList of body.

document.querySelectorAll('button').forEach(btn => {
  btn.onclick = function(){
    if(document.body.classList.contains(this.textContent)){
      document.body.className = ''
    }
    else{
      document.body.className = '';
      document.body.classList.add(this.textContent)
    }
  }
})

.Lightblue{background-color: lightblue}
.Lightgrey{background-color: lightgrey}
.Pink{background-color: pink}
.Lightgreen{background-color: lightgreen}

<button type="button">Lightblue</button>
<button type="button">Lightgrey</button>
<button type="button">Pink</button>
<button type="button">Lightgreen</button>

This quick sample assumes you are not using classes on the body for anything else and that the names of your colours are single worded. If that is not the case, use data-attribute instead.

CodePudding user response：

You can improve the code to be shorter and more efficient by not using onclick attributes as triggers.

Use an eventListenerto listen to click events within all your buttons.

Then add a data-attribute that contains the color-name. Then you use e.target.dataset to get the value and include that as color:

let selected_color;

document.querySelectorAll('button').forEach(el =>
  el.addEventListener('click', function(e) {
    let clicked_color = e.target.dataset.btnColor;
    selected_color = (selected_color === clicked_color) ? '' : clicked_color;
    document.body.style.background = selected_color;
  })
)

<header>
<h1></h1>
</header>

<br>

<form action="#">
<label for="fname">Uw naam:</label>
<input type="text" id="fname" name="fname">

<input type="submit" value="Submit">
</form>

<button type="button" data-btn-color="lightblue">Lightblue</button>
<button type="button" data-btn-color="lightgrey">Lightgrey</button>
<button type="button" data-btn-color="pink">Pink</button>
<button type="button" data-btn-color="lightgreen">Lightgreen</button>