Question

0

110

Visualizações

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

about 4 years ago · Juan Pablo Isaza

3 Respostas

Responde à pergunta

0

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>

about 4 years ago · Juan Pablo Isaza Relatório

0

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>

about 4 years ago · Juan Pablo Isaza Relatório

Responde à pergunta

Encontrar trabalhos remotos

Accepted Answer · 2022-07-10T10:49:26.083Z

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>

0

110

Changing style of only one button with the same class

3 Respostas

0

0

0

Encontrar trabalhos remotos

Andres GPT