Adjust background color on click using JavaScript

Question

Adjust background color on click using JavaScript

Could someone provide me with the JavaScript code to change the background color of a page from blue to green when a button is clicked? I have seen this feature on many websites but haven't been able to write the code myself. I am specifically looking for assistance in ReactJS. Thank you in advance!

javascript html css reactjs

Answer 1

Answer №1

To change the background color when a button is clicked, you can utilize a JavaScript function to modify the style within the HTML document.

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

This JavaScript function allows you to alter the color, and you can invoke it during an event like this:

<input type="button" onclick="updateBackgroundColor('blue');">

Consider using jQuery for this purpose.

If you only want the color change to last for a few seconds, you can employ the setTimeout function:

window.setTimeout("updateBackgroundColor()",5000);

Answer 2

To change the background color when a button is clicked, you can utilize a JavaScript function to modify the style within the HTML document.

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

This JavaScript function allows you to alter the color, and you can invoke it during an event like this:

<input type="button" onclick="updateBackgroundColor('blue');">

Consider using jQuery for this purpose.

If you only want the color change to last for a few seconds, you can employ the setTimeout function:

window.setTimeout("updateBackgroundColor()",5000);

Answer 3

Answer №2

You have the ability to change the background color of an element using CSS.

Additionally, by utilizing JavaScript, you can assign click functions to elements that modify the style using

element.style.property = 'value';

. In the instance provided below, I have linked it within the HTML to a button, however, this function could just as easily be applied to the body element or entirely defined in JavaScript.

body {
  background-color: blue;
}

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

Answer 4

You have the ability to change the background color of an element using CSS.

Additionally, by utilizing JavaScript, you can assign click functions to elements that modify the style using

element.style.property = 'value';

. In the instance provided below, I have linked it within the HTML to a button, however, this function could just as easily be applied to the body element or entirely defined in JavaScript.

body {
  background-color: blue;
}

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

Answer 5

Answer №3

Have you considered diving into the world of Jquery, a widely-used JavaScript library? Jquery makes it easy to achieve your desired results. Check out this simple example:

$(“#ELEMENT_TO_MODIFY”).click(function() {
    $(this).addClass(“.new_class_with_different_style”);
});

Answer 6

Have you considered diving into the world of Jquery, a widely-used JavaScript library? Jquery makes it easy to achieve your desired results. Check out this simple example:

$(“#ELEMENT_TO_MODIFY”).click(function() {
    $(this).addClass(“.new_class_with_different_style”);
});

Answer 7

Answer №4

If you are searching for answers to your dilemmas, look no further.

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/

Answer 8

If you are searching for answers to your dilemmas, look no further.

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/

Answer 9

Answer №5

To change the background color of the body, you can use the following code:

document.body.style.backgroundColor = "red";

. This can be placed inside a function that is triggered by a user click event. For the second part, you can set the background color of a specific element by using:

document.getElementById("divID").style.backgroundColor = "red";

followed by

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

, which will revert to the original color after 10 seconds.

Answer 10

To change the background color of the body, you can use the following code:

document.body.style.backgroundColor = "red";

. This can be placed inside a function that is triggered by a user click event. For the second part, you can set the background color of a specific element by using:

document.getElementById("divID").style.backgroundColor = "red";

followed by

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

, which will revert to the original color after 10 seconds.

Answer 11

Answer №6

One way to achieve this functionality is by using the setTimeout() method:

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>

Alternatively, you can also make use of 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>

Answer 12

One way to achieve this functionality is by using the setTimeout() method:

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>

Alternatively, you can also make use of 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>

Answer 13

Answer №7

try out this code:

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

Answer 14

try out this code:

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

Adjust background color on click using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

first item's grandchild selection

Error: The if statement is not providing a valid output

HTML and Python synchronize perfectly when handling date formatting

Achieving uniform width in material ui: Tips for maintaining consistency

Creating personalized widths for bootstrap classes with SASS

Encountering difficulties when attempting to store files using mongoose in a node express.js program

What is the best way to stream an app's data directly to a browser in real time?

Ways to extract input values from a specific row in a textbox as users input data

Show a message on form submission rather than redirecting

Learn how to utilize JavaScript produced by the `webpack output library` in a `nodejs` application

How can the name of an element be passed as an argument to a function called by that element within a Vue component?

The issue of WithRouter Replace Component not functioning in React-Router-V6 has been encountered

Create a request for an update by utilizing Axios within a React and Material UI environment

Using setTimeout with drag and drop functionality in HTML

Guide to displaying or concealing the header using PHP

What is the best way to utilize the features of component A within component B when they exist as separate entities

Edge Browser does not support PHP Websocket technology

Can you explain the roles of client-side and server-side in Next.js?

Prevent data loss on webpage refresh by using Angular's local storage feature

The module you are trying to access at './server/controller/controller.js' does not contain an export with the name 'default'