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/

So what is your question?

connexo
– connexo

2018-02-06 22:31:44 +00:00
Commented Feb 6, 2018 at 22:31 — connexo
– connexo, Commented Feb 6, 2018 at 22:31

chriskirknielsen · Accepted Answer · 2018-02-06 22:42:32Z

3

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>

edited Feb 6, 2018 at 22:42

answered Feb 6, 2018 at 22:32

chriskirknielsen

2,9792 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James · Accepted Answer · 2018-02-06 22:40:27Z

1

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>

answered Feb 6, 2018 at 22:40

James

22.4k5 gold badges29 silver badges44 bronze badges

Comments

connexo · Accepted Answer · 2018-02-06 22:51:18Z

1

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>

edited Feb 6, 2018 at 22:51

answered Feb 6, 2018 at 22:42

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Comments

Kirill Simonov · Accepted Answer · 2018-02-06 22:53:00Z

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>

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 6, 2018 at 23:01

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Collectives™ on Stack Overflow

Click button to add a css style with js

5 Answers 5

Comments

Comments

Comments

Comments

This is the shortest version

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

This is the shortest version

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related