Make A Selected/Clicked Button Active In JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2022-08-30 12:53:56

---
canonical_url: https://softauthor.com/make-selected-clicked-button-active-in-javascript/
---

Learn how to make a **selected** or **clicked button active** in **JavaScript** without _Loop_.

You can either **add a CSS class** or add **one or more CSS properties** directly to a **selected button** to be active.

- [Add A Background Colour To A Selected Button](https://softauthor.com/make-selected-clicked-button-active-in-javascript/#add-background-colour-to-a-selected-button)
- [Add A CSS Class To A Selected Button](https://softauthor.com/make-selected-clicked-button-active-in-javascript/#add-css-class-to-selected-clicked-button)

###Add A Background Colour To A Selected Button

When you want to add some CSS style to a selected/clicked button in JavaScript to make it active,

**For Loop** will most likely be the **first choice** in our minds.

But, you **do not need** to use **loop** at all.

Let’s see how to do it in action.

###Create HTML Button Elements

Here is a simple **div** tag with an id **wrapper**.

It has **five** HTML **button elements** in it.

Nothing fancy.

```HTML
<div id="wrapper">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
</div>
```

![alt text](https://softauthor.com/wp-content/uploads/2022/07/Make-A-SelectedClicked-Button-Active-in-JavaScript-1-768x510.png)

###Attach Click Events To HTML Button Elements

• First, let’s **add a click event listener** to all the elements inside a **div**.

```JavaScript
const wrapper = document.getElementById("wrapper");

wrapper.addEventListener('click',(e) => {
})
```

• Check to see if the **clicked item is a button** inside the **click event callback function**.

```JavaScript
const isButton = e.target.nodeName === 'BUTTON';
```

• If the **clicked item** is NOT a **button**, **exit** the **click event callback function**.

So it **won’t execute** anything further if it’s **not a button click**.

```JavaScript
if (!isButton) {
    return;
}
```

###Add A CSS Property To Clicked Button

**Add** a **background colour** to a **selected**/**clicked** **button** by accessing the **event object** that is passed into the click event **callback function**.

```JavaScript
e.target.style.background = 'red';
```
This code works fine **until** the second button is **clicked**.

By then, both the **first** and **second** clicked buttons will have a **background colour of red** to indicate the **active** state.

![alt text](https://softauthor.com/wp-content/uploads/2022/07/Make-A-SelectedClicked-Button-Active-in-JavaScript-add-background-colour-2-1-768x516.png)

But what we want is to **add a background colour** to only the **currently clicked item** and remove it from the **previously selected item**.

To do that, we need to capture the **previously selected/clicked button** and remove the **background colour** from it.

###Capture Previously Selected/Clicked Item

• Declare a **constant** called **prevButton** outside of the **button** click event.

• Set its initial value to **null**.

```JavaScript
let prevButton = null;
```

• Now check to see if any button is added into the **prevButton** constant.

If it does, **remove the background colour** by setting its value to **none**.

```JavaScript
if(prevButton !== null) {
   prevButton.style.background = 'none';
}
```

• Finally, add the currently clicked item to the **prevButton**.

This way the **prevButton** does not have any previously clicked button object when a user clicks any of the button for the first time.

And it will **become available** when a user clicks any button **second time onwards**.

```JavaScript
 prevButton = e.target;
```

![alt text](https://softauthor.com/wp-content/uploads/2022/07/Make-A-SelectedClicked-Button-Active-in-JavaScript-add-background-colour-to-clicked-item-3-1-768x496.png)

###Add A CSS Class To A Selected/Clicked Button

• Adding just a **CSS property** via **JavaScript** will have some **limitation**.

It always recommend to create **CSS rule separately**, **toggle** it inside **JavaScript**.

• Define a **CSS** rule called **.activ**e with a single property **background:red**.

```CSS
.active {
  background:red;
}
```

• Add the **.active** class to the **currently clicked button object** which is **e.target**.

• Remove the **.active** class from the **prevButton**.

```JavaScript
let prevButton = null;

const wrapper = document.getElementById("wrapper");

wrapper.addEventListener('click', (e) => {

  const isButton = e.target.nodeName === 'BUTTON'; 
  
  if (!isButton) {
    return;
  }
  
  e.target.classList.add('active'); // Add .active CSS Class

  if(prevButton !== null) {
    prevButton.classList.remove('active');  // Remove .active CSS Class
  }
  
  prevButton = e.target;

});
```

![alt text](https://softauthor.com/wp-content/uploads/2022/07/Make-A-SelectedClicked-Button-Active-in-JavaScript-add-background-colour-to-clicked-item-3-1-768x496.png)

It will work exactly as before, but this time we have more control on **styling the active button state** anyway we want using **.active** class.