Tengo 7 botones Me gusta con la misma clase:
<button class="like" onclick="like()"><i class="fa fa-thumbs-up"></i></button>Ahora quiero cambiar solo este botón en el que se hace clic, pero está cambiando los 7 colores:
function like() { var elements = document.getElementsByClassName("fa-thumbs-up"); for (let element of elements) { element.style.color = "orange"; } }1) Puedes pasar la referencia del button al like como
onclick="like(this)"y cambie el color de ese elemento HTML en particular como:
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
Sería mejor seleccionar todos los botones usando querySelectorAll en JS y agregarle un detector de eventos.
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>Para mejorar la respuesta de @decpk, ya no debe usar .style en 2021. Use classList en su lugar para aplicar cambios a través de CSS. El uso espacial de .toggle hace que sea más fácil no solo cambiar el color sino también revertirlo.
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>Usar delegación de eventos:
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>