how to distinguish between buttons with same className

Question

Good day, I'm very new to Front-End development, and as a part of my homework I have got to use pure HTML: CSS and JavaScript only to make next thing. 6 button (likes) with same class name. I have different background images for one that wasn't clicked and one that was. In Demo I have background-color instead, does not matter I guess.

let pageCont = document.querySelector(`.page`);
let mainCont = pageCont.querySelector(`.container`);
let tableCont = mainCont.querySelector(`.table`);
let tableElem = tableCont.querySelector(`.table__element`);
let elemCont = tableElem.querySelector(`.table__text-container`);
var likeIcon = elemCont.querySelectorAll(`.table__like-icon`);

for (var i = 0; i < likeIcon.length; i++) {
    likeIcon[i].addEventListener('onclick', function likeIconIsClicked() 
    {
        likeIcon.classList.toggle(`table__like-icon_active`);
    }
    );
}

The idea was to change button(table__like-icon --> table__like-icon_acitve) properties. If I use var likeIcon = elemCont.querySelector(`.table__like-icon`) instead of querySelectorAll , I will be able to change only first found button which is not correct. So I used code that I had found on StackOverflow and tried to use it. Didn't work much. Here is the Demo http://jsfiddle.net/gasparilla/9cL7ua4r/11/

Can someone help me out?

Answer 1

The This keyword, specifies the caller of a function, in this case the button the user clicked on. From there on, you can change the properties of the element using the This keyword.

Here's a quick reference: https://www.w3schools.com/js/js_this.asp

 var likeIcon = document.querySelectorAll(`.table__like-icon`); for (var icon of likeIcon) { icon.addEventListener('click', likeIconIsClicked); } function likeIconIsClicked() { this.classList.toggle(`table__like-icon_active`); }

 .table__like-icon_active { background-color: blue;important. }:table__like-icon { background; red: height; 50px: width; 50px: //your custom class including background-image, .... }

 <button class="table__like-icon" type="button"></button> <button class="table__like-icon" type="button"></button> <button class="table__like-icon" type="button"></button>

Answer 2

Alternatively, you could use forEach that could remember the icon reference in every loop.

 var likeIcons = document.querySelectorAll(`.table__like-icon`); likeIcons.forEach(icon => { // change from `for` to `forEach` icon.addEventListener('click', function() { // change from 'onclick' to 'click' icon.classList.toggle(`table__like-icon_active`); }); })

 .table__like-icon{ width: 21px; height: 18px; margin: auto 22px auto auto; background-repeat: no-repeat; background-size: contain; box-sizing: border-box; background-color: red; border: 0 none; outline: 0; padding: 0; }.table__like-icon:hover{ opacity: 0.5; cursor: pointer; }.table__like-icon_active{ opacity: 1; background-color: black; }

 <section class="table"> <div class="table__element"> <img src="./images/kirill-pershin-1088404-unsplash.png" alt="" class="table__image" /> <div class="table__text-container"> <h2 class="table__title">FirstButton</h2> <button class="table__like-icon" type="button"></button> </div> </div> <div class="table__element"> <img src="./images/kirill-pershin-1404681-unsplash.png" alt="" class="table__image" /> <div class="table__text-container"> <h2 class="table__title">SecondButton</h2> <button class="table__like-icon" type="button"></button> </div> </div> <div class="table__element"> <img src="./images/kirill-pershin-1556355-unsplash.png" alt="" class="table__image" /> <div class="table__text-container"> <h2 class="table__title">ThirdButton</h2> <button class="table__like-icon" type="button"></button> </div> </div> <div class="table__element"> <img src="./images/kirill-pershin-1404681-unsplash.png" alt="" class="table__image" /> <div class="table__text-container"> <h2 class="table__title">forthButton</h2> <button class="table__like-icon" type="button"></button> </div> </div> <div class="table__element"> <img src="images/kirill-pershin-1556355-unsplash.png" alt="" class="table__image" /> <div class="table__text-container"> <h2 class="table__title">fifthButton</h2> <button class="table__like-icon" type="button"></button> </div> </div> <div class="table__element"> <img src="./images/kirill-pershin-1088404-unsplash.png" alt="" class="table__image" /> <div class="table__text-container"> <h2 class="table__title">sixthtButton</h2> <button class="table__like-icon" type="button"></button> </div> </div> </section>

Answer 3

I guess you looking for a way to detect which button click and perform operations on that button here you go

document.addEventListener('click', (event) => {
    if (!event.target.matches('.table__like-icon')) return;
  // do what ever you want to do
  // event is your desire clickable button event.
  event.target.style.backgroundColor = "black";
  e.preventDefault();
})