How to change the Background Color after Clicking the Button in JavaScript?
Last Updated :
30 Apr, 2025
Changing the background color after clicking a button in JavaScript involves attaching a click event listener to the button. When the button is clicked, it triggers a function that changes the background color of a specific element (like the page or a section of it).
This creates a simple and interactive effect that enhances the user experience.
Approaches
Below are the following approaches by which we can change the background color after clicking the button in JavaScript.
1. Using JavaScript
Using JavaScript to change the background color involves adding an event listener to a button, which triggers a function to set the background color property of an element, dynamically altering the background when the button is clicked.
Example: In this example, we define changeColor to modify the background color, and myFunc to set the background to yellow and update the <h2> text. The button click triggers myFunc().
html
<html>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Click on button to change the
background color
</h3>
<button onclick="myFunc()">
Click here
</button>
<h2 id="GFG" style="color:green;"></h2>
<script>
let result = document.getElementById("GFG");
function changeColor(color) {
document.body.style.background = color;
}
function myFunc() {
changeColor('yellow');
result.innerHTML = "Background Color changed";
}
</script>
</body>
</html>
Output:
In this Example:
- The page displays a heading, a subheading, and a button using basic HTML elements.
- The <button> has an onclick attribute that runs the myFunc() function when clicked.
- The changeColor(color) function sets the page’s background color using document.body.style.background.
- The myFunc() function calls changeColor('yellow') to change the background to yellow.
- It also updates the <h2> element (with id="GFG") to display the message "Background Color changed".
- The JavaScript logic is placed inside a <script> tag at the bottom of the HTML body.
2. Using jQuery
This approach uses jQuery to change the background color after clicking the button. Below are the methods and their uses that will be used in this approach.
- The text() method is used to set the text content of the selected element.
- The on() method is used as event handlers for the selected elements and child elements.
- The css() method is used to change/set the background color of the element.
Example: This example changes the background color with the help of JQuery.
html
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Click on button to change
the background color
</h3>
<button>
Click here
</button>
<h2 id="GFG" style="color:green;"></h2>
<script>
$('button').on('click', function () {
$('body').css('background', '#ccc');
$('#GFG').text("Background Color Changed!");
});
</script>
</body>
</html>
Output:
In this example:
- The code loads the jQuery library from a CDN (
ajax.googleapis.com) to enable easier manipulation of HTML elements and events using jQuery functions. - It creates a webpage with centered content, displaying a heading “GeeksforGeeks”, a subheading, a clickable button, and an empty heading (
<h2>) with the ID "GFG". - When the button is clicked, a jQuery function runs that performs two actions.
- The background color of the entire
<body> is changed to light gray (#ccc) using jQuery's .css() method. - The empty
<h2> with ID "GFG" is updated to show the text “Background Color Changed!” using jQuery’s .text() method.
Conclusion
Changing the background color of a webpage after clicking a button is a simple but effective way to add interactivity to your site. By using JavaScript and the jQuery you can respond to user actions and modify the style of your page dynamically.
Similar Reads
How to change the button color after clicking it using AngularJS ? Created an HTML button and the task is to change the background color of the button when pressing it with the help of AngularJS. This task can be accomplished using the ng-click directive that helps to toggle the display of the content when the button or any specific HTML element is clicked. Here, t
2 min read
How to Change the Color of the Alert Box in JavaScript ? An alert box is a dialogue box that pops up on the screen to provide information to the user. It contains a message and an OK button, which allow users to acknowledge the message and close the box. Alert boxes are commonly used in web development to display important messages, warnings, or notificat
5 min read
How to Change the Color of the Alert Box in JavaScript ? Alert boxes, often utilized in JavaScript applications, provide users with important notifications or messages. However, their default appearance may not always blend seamlessly with the overall design of your website or application. JavaScript offers several methods to customize alert boxes as list
3 min read
How to change text color depending on background color using JavaScript? The task is to set the foreground color based on the background color so that it will become visible. Here few of the important techniques are discussed. We are going to use JavaScript. Approach: First, select the random Background color(by selecting random RGB values) or a specific one.Use the YIQ
3 min read
How to Change the Color of Button on Click ? Sometimes, on a web page, when a user clicks a button, it gets difficult to understand whether the button was clicked or not. In such cases, you can change the background color of the button to indicate that the button is clicked. Changing the color of a button when it's clicked can make your websit
4 min read