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");

  }
}

/

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

• javascript

• So what is your question? – connexo Commented Feb 6, 2018 at 22:31

5 Answers 5

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>

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>

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>

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>

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>