[ANSWERED] html – Change background colour with javascript with 2 colours

Question 1

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.

Edit

As Javascript requested, the mentioned version which does not collide with other potential usecases.

It sets a data-attribute instead of a class and uses styles which regard those data-attributes.

document.querySelectorAll('button').forEach(btn => {
  btn.onclick = function(){
    const tColour = this.dataset.color;
  
    if(document.body.dataset.color === tColour){
      document.body.dataset.color = ''
    }
    else{
      document.body.dataset.color = tColour
    }
  }
})

[data-color=Lightblue]{background-color: lightblue}
[data-color=Lightgrey]{background-color: lightgrey}
[data-color=Pink]{background-color: pink}
[data-color=Lightgreen]{background-color: lightgreen}

<button type="button" data-color="Lightblue">Lightblue</button>
<button type="button" data-color="Lightgrey">Lightgrey</button>
<button type="button" data-color="Pink">Pink</button>
<button type="button" data-color="Lightgreen">Lightgreen</button>

Question 2

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>

Question 3

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

Question 4

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";
}

}

Question 5

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

Question 6

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>

Question 7

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.

Bollate

[ANSWERED] html – Change background colour with javascript with 2 colours

By

Solution 1 :

Edit

Solution 2 :

Solution 3 :

Solution 4 :

Solution 5 :

Solution 6 :

Problem :

Comments

Comment posted by Syed Arsalan Hussain

Comment posted by tacoshy

Comment posted by Lain

Comment posted by tacoshy

Comment posted by Lain

Comment posted by i-drink-dirty-code

Comment posted by Lain

Comment posted by tacoshy

Comment posted by JavaScript

Comment posted by JavaScript

Comment posted by JavaScript

Comment posted by tacoshy

Comment posted by JavaScript

By

Related Post

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate