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

}

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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

CodePudding user response：

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>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>