How to Change the Background Color on Button Click in JavaScript

Enhancing web page interactivity often involves responding to user actions, such as button clicks. Changing the background color on a button click is a common way to provide visual feedback or create engaging effects. This article explores three methods to achieve this using JavaScript: inline event handlers, event listeners, and jQuery. These techniques will help you add dynamic color changes to your web projects, improving user experience. For a foundational overview, see Introduction to JavaScript.

Inline Event Handler
Event Listener
Using jQuery

Method 1: Inline Event Handler

This method uses an inline onclick attribute to trigger a function that changes the background color.

<!DOCTYPE html>
<html>
<head>
    <style>
        #btn {
            padding: 10px 20px;
            background-color: coral;
            border-radius: 20px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button id="btn" onclick="changeColor()">Click me</button>

    <script>
        function changeColor() {
            document.body.style.backgroundColor = "lightgreen";
        }
    </script>
</body>
</html>

Explanation:

The onclick attribute on the button calls changeColor() when clicked.
document.body.style.backgroundColor sets the page’s background to “lightgreen”.
This method is simple but mixes HTML and JavaScript, which may reduce maintainability.

For more on JavaScript functions, see JavaScript Functions.

Method 2: Using Event Listener

This method uses addEventListener to attach a click event handler, separating JavaScript from HTML.

<!DOCTYPE html>
<html>
<head>
    <style>
        #btn {
            padding: 10px 20px;
            background-color: coral;
            border-radius: 20px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button id="btn">Click me</button>

    <script>
        const button = document.getElementById("btn");
        button.addEventListener("click", changeColor);

        function changeColor() {
            document.body.style.backgroundColor = "lightgreen";
        }
    </script>
</body>
</html>

Explanation:

document.getElementById("btn") selects the button by its ID.
addEventListener("click", changeColor) attaches the changeColor function to the button’s click event.
This approach promotes cleaner code and better separation of concerns.

Learn more about event handling in JavaScript DOM Manipulation.

Method 3: Using jQuery

This method uses the jQuery library to handle the click event and change the background color.

<!DOCTYPE html>
<html>
<head>
    <style>
        #btn {
            padding: 10px 20px;
            background-color: coral;
            border-radius: 20px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button id="btn">Click me</button>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#btn").click(function() {
                $("body").css("background-color", "lightgreen");
            });
        });
    </script>
</body>
</html>

Explanation:

$(document).ready() ensures the code runs after the DOM is loaded.
$("#btn").click() attaches a click handler to the button.
$("body").css("background-color", "lightgreen") changes the background color.
jQuery simplifies DOM manipulation but requires an external library.

For more on jQuery, see How to Append Text to a DIV using JavaScript.

Live Demo: Change Background Color

Select Method: Choose Color:

Choosing the Right Method

Inline Event Handler: Simple for small projects but less maintainable due to mixed HTML and JavaScript.
Event Listener: Preferred for modern applications, offering clean code and flexibility.
jQuery: Useful for projects already using jQuery, but avoid adding the library for small tasks.

Try these methods in our JavaScript Playground!

Real World Applications

Changing background colors dynamically is used in:

UI Feedback: Indicating user actions, like button clicks.
Theming: Allowing users to switch between light and dark modes.
Games: Creating dynamic visual effects (see How to Get Random Value from Array in JavaScript).
Data Visualization: Highlighting changes in dashboards.

Tips for Dynamic Color Changes

Random Colors: Use random RGB values for variety (see How to Generate Random RGB Color Using JavaScript).
Accessibility: Ensure color changes maintain sufficient contrast for readability.
Performance: Avoid frequent DOM updates in loops; batch changes when possible.

For advanced DOM techniques, explore A Comprehensive Guide to JavaScript: From Basics to Advanced Topics.