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