Toggle an Element's background color on click using JS

avatar

Borislav Hadzhiev

Wed Dec 29 20212 min read

banner

Photo by Jamie Davies

Toggle an Element's background color on click using JS #

To toggle an element's background color on click:

  1. Add a click event listener to the element.
  2. Each time the element is clicked, check the element's current background color and change it.
  3. Use the element.style.backgroundColor property to change the element's background color.

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" style="background-color: salmon">Button</button> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const btn = document.getElementById('btn'); btn.addEventListener('click', function onClick(event) { const backgroundColor = btn.style.backgroundColor; if (backgroundColor === 'salmon') { btn.style.backgroundColor = 'green'; // 👇️ optionally change text color // btn.style.color = 'white'; } else { btn.style.backgroundColor = 'salmon'; // 👇️ optionally change text color // btn.style.color = 'blue'; } });

We added a click event listener to the button element, so a function is invoked every time the button is clicked.

In the function, we check if the element's current background color is equal to a specific value and change it if it is.

If the element's background color is not equal to the value, we reset the background color to its initial value.

You could add more conditions by using an else if statement.

index.js
const btn = document.getElementById('btn'); btn.addEventListener('click', function onClick(event) { const backgroundColor = btn.style.backgroundColor; if (backgroundColor === 'salmon') { btn.style.backgroundColor = 'green'; } else if (backgroundColor === 'green') { btn.style.backgroundColor = 'purple'; } else { btn.style.backgroundColor = 'salmon'; } });

In the example above the background colors of the element alternate between salmon, green and purple.

Note that instead of explicitly using btn, we can use the target property on the event object to access the element the user clicked on.

index.js
const btn = document.getElementById('btn'); btn.addEventListener('click', function onClick(event) { const backgroundColor = event.target.style.backgroundColor; if (backgroundColor === 'salmon') { event.target.style.backgroundColor = 'green'; } else { event.target.style.backgroundColor = 'salmon'; } });

In the example, we used the target property on the event object. The target property is a reference to the object (element) on which the event was dispatched.

In other words event.target gives us access to the DOM element the user clicked.

Because the event listener is added to the button element, event.target points to the button.

You can console.log the target property to see the DOM element which was clicked by the user.

index.js
const btn = document.getElementById('btn'); btn.addEventListener('click', function onClick(event) { console.log(event.target); const backgroundColor = event.target.style.backgroundColor; if (backgroundColor === 'salmon') { event.target.style.backgroundColor = 'green'; } else { event.target.style.backgroundColor = 'salmon'; } });

Using event.target is a bit more generic and is especially useful when adding events to larger elements, e.g. the document.

Use the search field on my Home Page to filter through my more than 1,000 articles.