How To Add Class To Buttons On Click

Sorry for silly question , but I can't add class to button on click. I have list of buttons and on click I need to change background of active button . I dont know how to get index

Solution 1:

Only need to leave $(document).ready(function()

I am not sure why do you need to leave that when you have the equivalent JavaScript (DOMContentLoaded).

Loop through all the buttons, inside the event handler function first remove the class from all the buttons then add the class only to the clicked button:

document.addEventListener('DOMContentLoaded', () => {

    let myBtns=document.querySelectorAll('.content-itinerary__buttons');
    myBtns.forEach(function(btn) {

        btn.addEventListener('click', () => {
          myBtns.forEach(b => b.classList.remove('active'));
          btn.classList.add('active');
        });
 
    });

});

.active {
    color: #fff;
    background-color: #4CAF50;
}

<div class="content-itinerary__buttons-wrapper">

  <button class="content-itinerary__buttons description-text ">Day 2</button>
  <button class="content-itinerary__buttons description-text">Day 3</button>
  <button class="content-itinerary__buttons description-text">Day 4</button>

</div>

Solution 2:

You just need to use event object in click event

$(document).ready(function() {
  let myBtns=document.querySelectorAll('.content-itinerary__buttons-wrapper')[0];

  myBtns.addEventListener('click', (e)=> {
    if (e.target.className.indexOf('clicked') === -1) {
      e.target.className += ' clicked';
    } else {
      e.target.className = e.target.className.replace(' clicked', '');
    }
  })
});

Solution 3:

This is your solution

var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("content-itinerary__buttons");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
  });
}

.content-itinerary__buttons-wrapper {
    display: flex;
    margin-top: 20px;
}

.content-itinerary__buttons {
    flex-grow: 1;
    padding: 21px 15px 15px 15px;
    box-sizing: border-box;
    border: 1px solid #D7D7D7;
    outline: none;

    &:not(:last-child) {
        border-right: 0;
    }

}

.active, .btn:hover {
  background-color: red;
  color: white;
}

<div class="content-itinerary__buttons-wrapper" id="myDIV">
     <button  class="content-itinerary__buttons description-text active ">Day 2</button>
     <button class="content-itinerary__buttons description-text">Day 3</button>
     <button class="content-itinerary__buttons description-text ">Day 4</button>
     <button class="content-itinerary__buttons description-text">Day 5</button>
     <button class="content-itinerary__buttons description-text">Day 6</button>
     <button class="content-itinerary__buttons description-text">Day 7</button>
     <button class="content-itinerary__buttons description-text">Day 8</button>
     <button class="content-itinerary__buttons description-text">Day 9</button>
     <button class="content-itinerary__buttons description-text">Day 10</button>
</div>

See Code link

Solution 4:

Onclick of the button you can set class name to the button

function a(e)
{
e.setAttribute("class","active");
}

.active
{
color:red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-itinerary__buttons-wrapper">
    <button class="content-itinerary__buttons description-text" onclick="a(this)">Day </button>
    <button class="content-itinerary__buttons description-text" onclick="a(this)">Day </button>
    <button class="content-itinerary__buttons description-text" onclick="a(this)">Day </button>
 </div>

Solution 5:

If you going to get rid of jQuery replace wrapper function to use listen for DOMContentLoaded event. It's the same as jQuery documentReady.

In your click handler use event object, ev.target in my example is a button which fired the event. Then use classList property to add your class.

document.addEventListener('DOMContentLoaded', function(){
let myBtns=document.querySelector('.content-itinerary__buttons-wrapper')

  myBtns.addEventListener('click', (ev)=>{
    let btn = ev.target;
    btn.classList.add('red');
  });
});