Changing style of only one button with the same class

November 14, 2021

I have 7 like buttons with the same class:

<button class="like" onclick="like()"><i class="fa fa-thumbs-up"></i></button>

Now i want to change only this button which is clicked, but it is chaning all 7 colors:


function like(){
            var  elements = document.getElementsByClassName('fa-thumbs-up');
            for (let element of elements) { element.style.color = "orange"; }

}

>Solution :

1) You can pass the reference of the button to the like as

onclick="like(this)"

and change the color of that particular HTML element as:

e.style.color = "orange";

function like(e) {
  e.style.color = "orange";
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<button class="like" onclick="like(this)"><i class="fa fa-thumbs-up"></i></button>
<button class="like" onclick="like(this)"><i class="fa fa-thumbs-up"></i></button>
<button class="like" onclick="like(this)"><i class="fa fa-thumbs-up"></i></button>
<button class="like" onclick="like(this)"><i class="fa fa-thumbs-up"></i></button>
<button class="like" onclick="like(this)"><i class="fa fa-thumbs-up"></i></button>
<button class="like" onclick="like(this)"><i class="fa fa-thumbs-up"></i></button>
<button class="like" onclick="like(this)"><i class="fa fa-thumbs-up"></i></button>

2) Recommended approach

It would be better to select all buttons using querySelectorAll in JS and add event listener on it.

function like(e) {
  e.target.style.color = "orange";
}

const buttons = document.querySelectorAll("button.like");
buttons.forEach((item) => {
  item.addEventListener("click", like)
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<button class="like"><i class="fa fa-thumbs-up"></i></button>
<button class="like"><i class="fa fa-thumbs-up"></i></button>
<button class="like"><i class="fa fa-thumbs-up"></i></button>
<button class="like"><i class="fa fa-thumbs-up"></i></button>
<button class="like"><i class="fa fa-thumbs-up"></i></button>
<button class="like"><i class="fa fa-thumbs-up"></i></button>
<button class="like"><i class="fa fa-thumbs-up"></i></button>