How to Change the Background Color on Button Click in JavaScript

Enhancing the interactivity of a web page often involves responding to user actions, such as button clicks. One common user interaction is to change the background color of a page upon clicking a button. This dynamic modification can provide visual feedback or create engaging effects in web applications. JavaScript offers multiple approaches to achieve this functionality.

In this article, we will explore different methods to change the background color on button click. These methods include using inline event handlers, adding event listeners, and leveraging libraries like jQuery. By understanding these techniques, you will be equipped to incorporate dynamic color changes into your web projects, enhancing user experience and interactivity.

01. Inline Event Handler
02. Event Listener
03. Using jQuery

01. Inline Event Handler

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

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

In this method, we add an inline event handler to the button using the onclick attribute. When the button is clicked, the changeColor() function is called. Inside the function, we access the body element using document.body and modify its style property to change the backgroundColor to "lightgreen".

Read Also:

02. Using "Event Listener"

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

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

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

In this method, we select the button element using document.getElementById("btn") and assign it to the button variable. We then use the addEventListener() method to attach a click event listener to the button. When the button is clicked, the changeColor() function is executed. Inside the function, we access the body element and modify its style property to change the backgroundColor to "lightgreen".

Read Also:

03. Using jQuery

<!DOCTYPE html>
<html>
<head>
  <style>
    #btn {
      background-color: coral;
      border-radius: 20px;
      border: none;
      padding: 10px 20px;
      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>

In this method, we include the jQuery library by adding a <script> tag with the jQuery CDN link. We use $(document).ready() to ensure that the code runs after the document is fully loaded. Inside the function, we select the button using $("#btn") and attach a click event handler using .click(). When the button is clicked, the anonymous function is executed, and we use $("body") to select the body element and modify its CSS using .css() to change the backgroundColor to "lightgreen".

Read Also:

Archive