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

Last Updated : 17 Sep, 2024

Changing the background color after clicking a button in JavaScript involves adding an event listener to the button that triggers a function when clicked.

This function alters the background color of a specified element, creating an interactive effect on the web page.

Below are the approaches to change the background color after clicking the button in JavaScript:

Table of Content

Using JavaScript
Using jQuery

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 defines 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

<!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

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=
"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:

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.

JQuery | Get the n-th level parent of an element

PranchalKatiyar

Improve

Article Tags :

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

Using JavaScript

Using jQuery

Similar Reads

Thank You!

What kind of Experience do you want to share?