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

Questions about setting up a local development environment for Angular.js

Monitor a user's activity and restrict the use of multiple windows or tabs using a combination of PHP and

In a Next.js application, the data retrieved from a MongoDB database is delayed compared to the data fetched from a JSON file stored

Encountering difficulties in transferring bulky files with the request module in Node.js

Require assistance with refreshing the index for the chosen row

Is it more efficient to have a single global event listener or multiple event listeners of the same type in each component for productivity?

Troubleshooting Angular JS Module Injection Issues

I am attempting to format an HTML form with proper indentation, but it seems to be eluding me

What could be causing my function to output unicode replacement characters instead?

Using PHP to upload a lone image file to an FTP server

The value within the style.setProperty function does not get applied

What is the best way to enhance a react-bootstrap component with TypeScript?

There seems to be an issue with the bullet functionality in phaser.io

Listening for position changes using jQuery events

Connecting CSS auto-complete with JSP content within Eclipse

elements that overlap exclusively in IE 8

Interconnected realms communication

My project in WebStorm encounters a setback due to the updated release of Typescript 5+

The spreading of personalized events

What methods can be used to modify the appearance of the cursor depending on its position?