How to change the button color after clicking it using AngularJS ?

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:

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:

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.

How to change the button color after clicking it using AngularJS ?

P

PranchalKatiyar

Improve

Article Tags :

Similar Reads

How to change the text and image by just clicking a button in JavaScript ?

The image and text can be changed by using JavaScript functions and then calling the functions by clicking a button.Â We will do that into 3 sections., in the first section we will create the structure by using only HTML in the second section we will design minimally to make it attractive by using si

How to Add Blinking Background Color in JavaScript ?

In this article, we will learn how to create a blinking background color. Adding a blinking background color to an element can be an attention-grabbing visual effect that can be useful in various web applications. It can be achieved using JavaScript by toggling the background color of an element bet

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

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

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

How to change the background color of the active nav-item?

In this article, we will learn how we can change the background of the active nav item with the help of CSS and jQuery. Given an HTML document containing a list of items, the task is to change the background color of a particular list item when it is active or clicked. We can change the background c

How to change the â€œcheckedâ€ background color of toggle switch in Bootstrap 4?

Bootstrap is a popular choice among web developers for building interactive webpage designs. Bootstrap has come along a long way with multiple releases and enriched content with every new release. Bootstrap has a wide community that has also contributed newer packages that have made working with Boo

How to change the background color of a button on hover in Tailwind CSS ?

Tailwind CSS, a utility-first CSS framework, provides a highly efficient way to style web pages. Among its many utilities, Tailwind offers a basic and powerful way to apply the hover effect to the buttons. This feature enhances the visual appeal of buttons and increases interactivity. We will explor

How to change Input box borders after filling the box using JavaScript ?

In this article, we will change the input border after filling in the text on the input text field. The onchange event attribute works when the value of the element changes and selects the new value from the list. Approach: Whenever the input value is changed with some value by the user, the onchang

How to change a button text on click using localStorage in Javascript ?

In this article, we will learn how to change a button text using Javascript localStorage when we click on the button achieved by adding HTML onclick event listener. Approach: HTML DOM Window localStorage allows us to store key-value pairs in our browser using an object. The name of the key should be