CODEWITHSUNDEEP
javascripthtmljquerycss
Yerlan Yeszhanov
Yerlan Yeszhanov

Reputation: 2449

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 of element on click inside list and add class. I need to make it on pure javascript. Only need to leave $(document).ready(function() . Here is my fiddle https://jsfiddle.net/armakarma/ns5tfcL0/15/

HTML

<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>

JS

$(document).ready(function() {
let myBtns=document.querySelector('.content-itinerary__buttons-wrapper')

  myBtns.addEventListener('click', ()=>{
    console.log('test')
  }) 
});

Upvotes: 2

Views: 18943

Answers (7)

Mamun
Mamun

Reputation: 68933

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>

Upvotes: 4

Tien Duong
Tien Duong

Reputation: 2595

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', '');
    }
  })
});

Upvotes: 4

Muhammed
Muhammed

Reputation: 89

Just use forEach loop :)

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

 let myAllButtons = myBtns.querySelectorAll('.content-itinerary__buttons')

 myAllButtons.forEach(function(element) {
    element.onclick = () => element.classList.add('some-class')
 })
});

Upvotes: 0

StefanN
StefanN

Reputation: 911

I would definitely use Element.classList API for adding/removing classes to/from elements.

Why?

  • Adding/removing classes won't affect other classes already set to the element
  • Updating the className of the element will replace all existing classes
  • It comes with handy functions like "toggle" and "replace

Your code will look something like this:

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

  myBtns
    .forEach(btn => btn
        .addEventListener('click', (e)=>{
        // Check if the classList already exists on the element clicked
        // If so, remove it
        // Else, add it
            e.classList.contains('clicked') 
                ? e.classList.add('clicked') 
                : e.classList.remove('clicked');
        })
    ); 
});

Upvotes: 2

Kiran Mistry
Kiran Mistry

Reputation: 2725

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

Upvotes: 2

Evgenii Malikov
Evgenii Malikov

Reputation: 437

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');
  });
});

Upvotes: 1

ellipsis
ellipsis

Reputation: 12152

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>

Upvotes: 1

Related Questions