---
title: "How to change background color when button is clicked in JavaScript?"
description: "How to change background color when button is clicked in JavaScript?"
author: "Ravi Vishwakarma"
published: 2021-07-19
updated: 2023-06-16
canonical: https://answers.mindstick.com/qa/93772/how-to-change-background-color-when-button-is-clicked-in-javascript
category: "web application"
tags: ["css cascading style sheets", "html5", "javascript"]
reading_time: 2 minutes
---
# How to change background color when button is clicked in JavaScript?
How to change [background color](https://www.mindstick.com/forum/33777/how-to-change-the-background-color-of-uicollectionview-cell-in-ios) when [button is clicked](https://www.mindstick.com/forum/157821/write-a-jquery-code-that-selects-all-the-checkboxes-in-a-form-when-a-select-all-button-is-clicked) in [JavaScript](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript)?
## Answers
### Answer by Ethan Karla
```
JS Demo
Select Color name :
```
### Answer by Rocky Dada
To change the [background](https://www.mindstick.com/articles/65/how-to-change-background-color-of-tab-control-in-c-sharp) [color](https://www.mindstick.com/articles/77/how-to-split-form-background-color-in-c-sharp) when a [button](https://www.mindstick.com/articles/23268/connect-devices-using-wps-button-on-your-linksys-wifi-router) is clicked using JavaScript, you can follow these steps:
HTML: Start by creating a button element and giving it an id or class for easy identification. Also, make sure to set an initial background color for the element you want to change. For example:
```html
```
JavaScript: Next, you need to add an event listener to the button element and define a function that will be executed when the button is clicked. Inside that function, you can change the background color of the target element. Here's an example using plain JavaScript:
```html
// Get the button and target element by their respective IDs
var button = document.getElementById('changeColorButton');
var targetElement = document.getElementById('targetElement');
// Add a click event listener to the button
button.addEventListener('click', function() {
// Change the background color of the target element
targetElement.style.backgroundColor = 'red'; // Change it to the desired color
});
```
---
Original Source: https://answers.mindstick.com/qa/93772/how-to-change-background-color-when-button-is-clicked-in-javascript
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.