Open In App
Related Articles

How to change the background color after clicking the button in JavaScript ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

In this article, we will learn how we can change the background color of an element once a button is clicked by the user using JavaScript and jQuery.

Using JavaScript to change the background

This approach uses JavaScript to change the background-color after clicking the button. Use HTML DOM Style backgroundColor Property to change the background color by clicking the button. This property is used to set the background-color of an element. 

Example: This example changes the background color with the help of JavaScript

html

<!DOCTYPE HTML>
<html>
 
<head>
    <title>
        How to change the background color
        after clicking the button ?
    </title>
</head>
 
<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: 

Using jQuery to change the background

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

<!DOCTYPE HTML>
<html>
 
<head>
    <title>
        How to change the background color
        after click on button in jQuery ?
    </title>
 
    <script src=
    </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:

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.



Last Updated : 14 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads