Skip to main content

How to Change a Button's Color onClick in JavaScript

Changing a button's color when a user clicks it is a fundamental DOM manipulation task in JavaScript. It provides immediate visual feedback and is a key building block for creating interactive and dynamic web pages.

This guide will teach you the standard method for changing a button's color using a click event listener. You will learn how to set a new color once, and then how to build on that logic to cycle through a list of different colors every time the button is clicked.

Core Task: Handling a Click Event​

The first step is to select the button element from the DOM and attach a click event listener to it. This listener will execute a function whenever the user clicks the button.

First, we need a button in our HTML with a unique ID so we can select it.

<!DOCTYPE html>
<html>
  <body>
    <button id="my-button">Click Me</button>

    <script src="index.js"></script>
  </body>
</html>

And the code for hanldling user's clicks:

// 1. Select the button from the DOM
const myButton = document.getElementById('my-button');

// 2. Add a 'click' event listener
myButton.addEventListener('click', function() {
  // 3. This code will run every time the button is clicked
  console.log('Button was clicked!');
});

Solution 1: Change the Color on the First Click​

Once you have the event listener set up, changing the color is as simple as modifying the button's style property. The style.backgroundColor property controls the background color.

const myButton = document.getElementById('my-button');

myButton.addEventListener('click', function onClick() {
  // Set the background color to salmon
  myButton.style.backgroundColor = 'salmon';
  
  // You can also change the text color
  myButton.style.color = 'white';
});

When the user clicks the button, the background color will change to salmon and the text will become white. Subsequent clicks will not change the color further, as it is already set.

Solution 2: Change the Color on Every Click (Cycle Through Colors)​

For a more dynamic effect, you can make the button change to a different color from a predefined list on each click.

The logic:

  1. Create an array of colors.
  2. Create an index variable to keep track of which color is next.
  3. Inside the click handler, use the current index to get a color from the array and apply it.
  4. Increment the index, resetting it to 0 when it reaches the end of the array.

Solution:

const myButton = document.getElementById('my-button');

// An array of colors to cycle through
const colors = ['#007bff', '#28a745', '#dc3545', '#ffc107', '#17a2b8'];
let currentIndex = 0;

myButton.addEventListener('click', function onClick() {
  // Apply the color from the current index
  myButton.style.backgroundColor = colors[currentIndex];
  myButton.style.color = 'white';

  // Increment the index for the next click
  currentIndex++;
  
  // If we've reached the end of the array, reset to the beginning
  if (currentIndex >= colors.length) {
    currentIndex = 0;
  }
});

With this code, the first click will turn the button blue, the second green, the third red, and so on, cycling back to the beginning after the last color.

How it Works (Event Listeners and the style Property)​

  • addEventListener('click', ...): This is the standard, modern way to handle events. It attaches a function (the "event handler") to the button that will be executed only when the specified event (click) occurs.
  • .style Property: Every HTML element in the DOM has a .style property. This property gives you direct access to the element's inline styles. Setting myButton.style.backgroundColor is the JavaScript equivalent of writing <button style="background-color: salmon;"></button>.

A Note on CSS vs. Inline Styles​

While setting inline styles with JavaScript works well, for more complex applications, the best practice is to toggle CSS classes instead.

.btn-clicked {
  background-color: salmon;
  color: white;
  border-color: darkred;
}
myButton.addEventListener('click', function onClick() {
  myButton.classList.add('btn-clicked');
});
note

This approach is cleaner because it separates your styling (CSS) from your logic (JavaScript).

Conclusion​

Changing a button's color on click is a simple but powerful technique for creating interactive web content.

To do it successfully:

  1. Select the button from the DOM, typically using document.getElementById().
  2. Add a click event listener with addEventListener('click', function() { ... }).
  3. Inside the handler function, modify the style.backgroundColor and style.color properties of the button element.
  4. For more dynamic behavior, use an array of colors and an index variable to cycle through different colors on each click.

Table of Contents