'javascript change background color on click [closed]

Can you show me Javascript that allows you to change the background color of the page to another color. For example, I have a blue background color and I want to change it to green. The color must be changed when the user presses a button that triggers the event. I saw that it exists on many sites but I could not write the code I write in REACTJS I would love to have your help

Thanks...

javascripthtmlcssreactjs


Solution 1:[1]

If you want change background color on button click, you should use JavaScript function and change a style in the HTML page.

function chBackcolor(color) {
   document.body.style.background = color;
}

It is a function in JavaScript for change color, and you will be call this function in your event, for example :

<input type="button" onclick="chBackcolor('red');">

I recommend to use jQuery for this.

If you want it only for some seconds, you can use setTimeout function:

window.setTimeout("chBackColor()",10000);

Solution 2:[2]

You can set the background color of an object using CSS.

You can also use JavaScript to attach click handlers to objects and they can change the style of an object using element.style.property = 'value';. In the example below I've attached it in the HTML to a button but the handler could equally have been added to the body element or defined entirely in JavaScript.

body {
  background-color: blue;
}
<button onclick="document.body.style.backgroundColor = 'green';">Green</button>

Solution 3:[3]

I'm suggest that you learn about Jquery, most popular JS library. With jquery it's simple to acomplish what you want.Simle example below:

$(“#DIV_YOU_WANT_CHANGE”).click(function() {
    $(this).addClass(“.your_class_with_new_color”);
});

Solution 4:[4]

Here you can find solutions for both your problems. 

document.body.style.height = '500px';
document.body.addEventListener('click', function(e){
    var self = this,
        old_bg = this.style.background;

    this.style.background = this.style.background=='green'? 'blue':'green';
    setTimeout(function(){
        self.style.background = old_bg;
    }, 1000);
})

http://jsfiddle.net/ea1xf3sx/

Solution 5:[5]

You can sets the body's background colour using document.body.style.backgroundColor = "red"; so this can be put into a function that's called when the user clicks. The next part can be done by using document.getElementByID("divID").style.backgroundColor = "red"; window.setTimeout("yourFunction()",10000); which calls yourFunction in 10 seconds to change the colour back.

Solution 6:[6]

You can use setTimeout():

var addBg = function(e) {
  e = e || window.event;
  e.preventDefault();
  var el = e.target || e.srcElement;
  el.className = 'bg';
  setTimeout(function() {
    removeBg(el);
  }, 10 * 1000); //<-- (in miliseconds)
};

var removeBg = function(el) {
  el.className = '';
};
div {
  border: 1px solid grey;
  padding: 5px 7px;
  display: inline-block;
  margin: 5px;
}
.bg {
  background: orange;
}
<body onclick='addBg(event);'>This is body
  <br/>
  <div onclick='addBg(event);'>This is div
  </div>
</body>

Using jQuery:

var addBg = function(e) {
  e.stopPropagation();
  var el = $(this);
  el.addClass('bg');
  setTimeout(function() {
    removeBg(el);
  }, 10 * 1000); //<-- (in miliseconds)
};

var removeBg = function(el) {
  $(el).removeClass('bg');
};

$(function() {
  $('body, div').on('click', addBg);
});
div {
  border: 1px solid grey;
  padding: 5px 7px;
  display: inline-block;
  margin: 5px;
}
.bg {
  background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<body>This is body
  <br/>
  <div>This is div</div>
</body>

Solution 7:[7]

you can do this---

<input type="button" onClick="changebackColor">
//changes background color to black on click
function changebackColor(){
document.body.style.backgroundColor = "black";
document.getElementById("divID").style.backgroundColor = "black";      
window.setTimeout("yourFunction()",10000);
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Majid
Solution 2 MT0
Solution 3 user3590094
Solution 4 ErDmKo
Solution 5 David
Solution 6
Solution 7 Community

Related Questions