Change a Button's color onClick (every time) using JS

avatar

Borislav Hadzhiev

Wed Dec 29 20212 min read

banner

Photo by Ahmed Carter

Table of Contents #

  1. Change a Button's color onClick
  2. Change a Button's color every time it's clicked

Change a Button's color onClick #

To change a button's color onClick:

  1. Add a click event listener to the button.
  2. Each time the button is clicked, set its style.backgroundColor property to a new value.
  3. Optionally set its style.color property.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <button id="btn">Button</button> <script src="index.js"></script> </body> </html>

And here is the related JavaScript.

index.js
const btn = document.getElementById('btn'); btn.addEventListener('click', function onClick() { btn.style.backgroundColor = 'salmon'; btn.style.color = 'white'; });
If you need to change the button's color every time it's clicked, scroll down to the next subheading.

We added an event listener to the button, which invokes a function every time the button is clicked.

We used the style.backgroundColor to change the button's background color and the style.color property to change the font color of the button.

Change a Button's color every time it's clicked #

To change a button's color every time it's clicked:

  1. Add a click event listener to the button.
  2. Each time the button is clicked, set its style.backgroundColor property to a new value.
  3. Use an index variable to track the current and next colors.

Here is the HTML for this example.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <button id="btn">Button</button> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const btn = document.getElementById('btn'); let index = 0; const colors = ['salmon', 'green', 'blue', 'purple']; btn.addEventListener('click', function onClick() { btn.style.backgroundColor = colors[index]; btn.style.color = 'white'; index = index >= colors.length - 1 ? 0 : index + 1; });

If you load the page and click on the button, you'll see that the button's background color alternates between the colors in the array.

We used a counter variable that tracks the index of the color in the array.

Each time the button is clicked, we either increment the value in the indexvariable or set it back to 0 if the last color already was shown.

We used a ternary operator, which is very similar to an if/else statement.

If the expression to the left of the question mark evaluates to a truthy value, the value to the left of the colon is returned, otherwise the value to the right is returned.

In the example, we check if the index variable stores a value that is equal or greater than the last index in the colors array.

If we've reached the last index, we set the index variable back to 0, otherwise we increment the value stored in the variable by 1.

This way we are able to get a different background color every time we click on the button.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee