Click button to add a css style with js

Question

What I want to achieve is to click one button and then the .clicked class will be added to the button I am clicking. But I also want to remove the class when I click one of the other buttons.

<div>
  <button class="btn-color-black btn">Yo!</button>
  <button class="btn-color-black btn">Yo!</button>
  <button class="btn-color-black btn">Yo!</button>
</div>

Css:

.clicked {
  color: pink;
}

Javascript

var btn = document.getElementsByClassName("btn");

for (var i = 0; i < btn.length; i++) {
    btn[i].addEventListener("click", myFunction);
}

function myFunction() {
    var parentElement = this.parentElement;

    if (this.classList.length <= 2) {
    this.classList.add("clicked");

  } else {
    this.classList.remove("clicked");

  }
}

https://jsfiddle.net/saj9oxyv/7/

Answer 1

What you can do is use querySelector to grab the current "clicked" element, remove the class, and then add the class to the clicked element.

 var btn = document.getElementsByClassName("btn"); for (var i = 0; i < btn.length; i++) { btn[i].addEventListener("click", myFunction); } function myFunction() { var parentElement = this.parentElement; var previousElement = document.querySelector('.clicked'); if (previousElement) { previousElement.classList.remove('clicked'); } if (this.classList.length <= 2) { this.classList.add("clicked"); } else { this.classList.remove("clicked"); } } 

 .clicked { color: pink; } 

 <div> <button class="btn-color-black btn">Yo!</button> <button class="btn-color-black btn">Yo!</button> <button class="btn-color-black btn">Yo!</button> </div> 

Answer 2

You can "remember" which one was clicked:

 var lastBtn; var btn = document.getElementsByClassName("btn"); for (var i = 0; i < btn.length; i++) { btn[i].addEventListener("click", myFunction); } function myFunction() { if (lastBtn) lastBtn.classList.remove("clicked"); this.classList.add("clicked"); lastBtn = this; } 

 .clicked { color: pink; } 

 <div> <button class="btn-color-black btn">Yo!</button> <button class="btn-color-black btn">Yo!</button> <button class="btn-color-black btn">Yo!</button> </div> 

Answer 3

Here is a concise solution. On click, it first removes .clicked from the button collection. Then it adds the class to the clicked button (which is available as event.target , the event (object) that triggered the function is always passed to the event handler automatically).

 var btn = document.getElementsByClassName("btn"); for (var i = 0; i < btn.length; i++) { btn[i].addEventListener("click", myFunction); } function myFunction(event) { Array.forEach.call(0, btn, function(btn) { btn.classList.remove("clicked"); }); event.target.classList.add("clicked"); } 

 .clicked { color: pink; } 

 <div> <button class="btn-color-black btn">Yo!</button> <button class="btn-color-black btn">Yo!</button> <button class="btn-color-black btn">Yo!</button> </div> 

Answer 4

All answers are good, but they don't remove the clicked class if the user clicks the same button again. To do it try this example:

 let btn = document.getElementsByClassName("btn"); for (let i = 0; i < btn.length; i++) { btn[i].addEventListener("click", myFunction); } function myFunction() { if (!this.classList.contains("clicked")) { let prev = document.querySelector('.clicked') if (prev) prev.classList.remove("clicked"); this.classList.add("clicked"); } else { this.classList.remove("clicked"); } } 

 .clicked { color: pink; } 

 <div> <button class="btn-color-black btn">Yo!</button> <button class="btn-color-black btn">Yo!</button> <button class="btn-color-black btn">Yo!</button> </div> 

Answer 5

This is the shortest version

Without for-loop nor forEach function, just Javascript function querySelector

function myFunction() {
  var current = document.querySelector('.clicked')
  if (current) current.classList.remove('clicked');      
  this.classList.add('clicked');
}

 var btn = document.getElementsByClassName("btn"); for (var i = 0; i < btn.length; i++) { btn[i].addEventListener("click", myFunction); } function myFunction() { var current = document.querySelector('.clicked') if (current) current.classList.remove('clicked'); this.classList.add('clicked'); } 

 .clicked { color: pink; } 

 <div> <button class="btn-color-black btn">Yo!</button> <button class="btn-color-black btn">Yo!</button> <button class="btn-color-black btn">Yo!</button> </div>