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

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>

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

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>

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

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>

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

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>

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

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

This is the shortest version

Comments

Linked

Related