Open In App

How to change the Background Color after Clicking the Button in JavaScript?

Last Updated : 30 Apr, 2025
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

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:

ClickImage

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:

5

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.


P
PranchalKatiyar
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox