Change Background Color After Clicking Button in JavaScript

To change the background color after clicking the button in JavaScript, we are going to discuss two different approaches. We have to perform two simple task, that is, adding a click event and changing the background color of the document.

In this article our task is to understand how to change the background color after clicking the button in JavaScript.

Approaches to Change Background Color on Clicking Button

Here is a list of approaches to change the background color after clicking the button in JavaScript which we will be discussing in this article with stepwise explaination and complete example codes.

Using backgroundColor Property

To change the background color after clicking the button in JavaScript, we have used backgroundColor property of DOM style object.

  • We have used body as element selector to set the text color and background-color of the HTML document.
  • Then, we have used a button which triggers chngColor() function upon clicking on it.
  • The chngColor() function uses DOM style object backgroundColor property to change the background color of HTML document.

Example

Here is a complete example code implementing above mentioned steps to change the background color after clicking the button in JavaScript using backgroundColor property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Changing the background color after clicking 
        the button in JavaScript
    </title>
    <style>
        body {
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>
<body>
    <h2>
        Changing the Background Color After Clicking 
        the Button in JavaScript.
    </h2>
    <p>
        In this example we have used style object 
        <strong>backgroundColor</strong> property
        to change the background color after clicking 
        the button
    </p>
    <button onclick="chngColor()">Change Color</button>
    <br><br>
    <div id="container">
        Click on the button to change the background color
        of div.
    </div>
    <script>
        function chngColor() {
            document.body.style.backgroundColor= "#031926";
        }
    </script>
</body>
</html>

Using jQuery

In this approach to change the background color after clicking the button in JavaScript we have used jQuery. The jQuery is a fast and concise JavaScript library with motto: Write less, do more.

  • The source of jQuery is defined using script tag in header section.
  • We have used body as element selector to set the text color and background color of the HTML document.
  • Then, we have used a button to change the background color upon clicking on it.
  • The $('button') selects the button and on() method adds event listener to selected items. We have added a click event.
  • The callback function() selects the body to modify the css using css(). The background property change the color of the HTML document.

Example

Here is a complete example code implementing above mentioned steps to change the background color after clicking the button in JavaScript using jQuery.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Changing the background color after clicking 
        the button in JavaScript
    </title>
    <style>
        body {
            color: white;
            background-color: #04af2f;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
    <h2>
        Changing the Background Color After Clicking 
        the Button in JavaScript.
    </h2>
    <p>
        In this example we have used <strong>jQuery</strong> 
        to change the background color after clicking 
        the button
    </p>
    <button>Change Color</button>
    <script>
        $('button').on('click', function () {
            $('body').css('background', '#031926');
        });
    </script>
</body>
</html>

Conclusion

In this article, we have demonstrated how to change the background color after clicking the button along with examples. We have seen two different examples here, in the first example, we have changed the color for the background after button is clicked using the backgroundColor property of DOM style object. In the second example, we have used jQuery to change the the background color upon clicking the button.

Updated on: 2024-11-22T17:35:20+05:30

20K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements