Make A 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
• Add A CSS Class To A Selected 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.

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

Attach Click Events To HTML Button Elements

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

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.

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.

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.

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.

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.

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.

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.

 prevButton = e.target;

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 .active with a single property background:red.

.active {
  background:red;
}

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

• Remove the .active class from the prevButton.

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;

});

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.