How to add an active class to the current element with JavaScript?

To add an active class to the current element with JavaScript, the code is as follows −


 Live Demo

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1" />
   .btn {
      border: none;
      outline: none;
      padding: 10px 16px;
      background-color: #6ea2f0;
      cursor: pointer;
      font-size: 18px;
   .active, .btn:hover {
      background-color: #666;
      color: white;
<h1>Active Button Example</h1>
<div id="sampleDiv">
<button class="btn">Giraffe</button>
<button class="btn active">Cow</button>
<button class="btn">Lion</button>
<button class="btn">Leopard</button>
<button class="btn">Cheetah</button>
<h2>Press any of the above button to set it class to active</h2>
   var btns = document.querySelectorAll(".btn");
   Array.from(btns).forEach(item => {
      item.addEventListener("click", () => {
         var selected = document.getElementsByClassName("active");
         selected[0].className = selected[0].className.replace(" active", "");
         item.className += " active";


The above code will produce the following output −

On clicking any other button −

Updated on: 08-May-2020

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started