CODEWITHSUNDEEP
javascripthtmlcss
Kuba Disko
Kuba Disko

Reputation: 5

Changing style of only one button with the same class

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

Upvotes: 0

Views: 902

Answers (4)

tacoshy
tacoshy

Reputation: 13001

To improve the anwser from @decpk you shouldnt use .style in 2021 anymore. Use classList instead to apply chanegs through CSS. Espacially using .togglemakes it easier not only to change the coor but also revert it.

function like(e) {
  e.target.classList.toggle('color-orange');
}

const buttons = document.querySelectorAll("button.like");
buttons.forEach((item) => {
  item.addEventListener("click", like)
});
.color-orange {
  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"><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>

Upvotes: 1

Jose Lora
Jose Lora

Reputation: 1390

Use this to apply just to the current element like the following example:

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

And to get the element inside the current element just use querySelector in your Javascript code like this:

function like(element){
            var  currentThumbs = element.querySelector('.fa-thumbs-up');
            currentThumbs.style.color = "orange";
}

Upvotes: 0

Spectric
Spectric

Reputation: 31987

Use event delegation:

document.addEventListener('click', function(e){
  let closest = e.target.closest('.like')
  if(closest) closest.style.color = "orange"
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" 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>

Upvotes: 1

DecPK
DecPK

Reputation: 25398

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>

Upvotes: 2

Related Questions