Event Delegation – Element Style Issues – Javascript

Having an issue whereby I can click on each individual element and the target element comes back as being clicked but when applying a style, it only applies to first element rather than any other targetted element.

Event Delegation works as said above I can click on each element on it’ll come back as being clicked, just style doesn’t apply

Below is a seperate written example to try and debug this issue but I’m stumped

giphyContainer.addEventListener('click', (e) => {
    console.log(e.target);

    if (e.target.classList.contains("giphyImg__Front1")) {
        console.log("clicked! 1")
        frontPanel.style.zIndex = -3;
        backPanel.style.zIndex = 3;
    }

    if (e.target.classList.contains("giphyImg__Front2")) {
        console.log("clicked! 2")
        frontPanel.style.zIndex = -3;
        backPanel.style.zIndex = 3;
    }

    if (e.target.classList.contains("giphyImg__Front3")) {
        console.log("clicked! 3")
        frontPanel.style.zIndex = -3;
        backPanel.style.zIndex = 3;
    }

    if (e.target.classList.contains("giphyImg__Back1")) {
        frontPanel.style.zIndex = 3;
        backPanel.style.zIndex = -3;
    }

    if (e.target.classList.contains("giphyImg__Back2")) {
        frontPanel.style.zIndex = 3;
        backPanel.style.zIndex = -3;
    }

    if (e.target.classList.contains("giphyImg__Back3")) {
        frontPanel.style.zIndex = 3;
        backPanel.style.zIndex = -3;
    }
})

<div class="giphyContainer">
    <div class="giphyImg">
        <img src="img1.png" alt="" class="giphyImg__Front giphyImg__Front1">
        <div class="giphyImg__Back giphyImg__Back1"></div>
    </div>
    <div class="giphyImg">
        <img src="img2.png" alt="" class="giphyImg__Front giphyImg__Front2">
        <div class="giphyImg__Back giphyImg__Back2"></div>
    </div>
    <div class="giphyImg">
        <img src="img3.png" alt="" class="giphyImg__Front giphyImg__Front3">
        <div class="giphyImg__Back giphyImg__Back3"></div>
    </div>
</div>

Answer

You’re using the global values of frontPanel and backPanel, which don’t change depending on which image you click on.

You need to set frontPanel and backPanel to the front and back images in the same DIV as the clicked element.

giphyContainer.addEventListener('click', (e) => {
  console.log(e.target);
  let frontPanel = e.target.closest("div.giphyImg").querySelector(".giphyImg__Front");
  let backPanel = e.target.closest("div").querySelector(".giphyImg__Back");
  
  if (e.target.classList.contains("giphyImg__Front1")) {
    console.log("clicked! 1")
    frontPanel.style.zIndex = -3;
    backPanel.style.zIndex = 3;
  }

  if (e.target.classList.contains("giphyImg__Front2")) {
    console.log("clicked! 2")
    frontPanel.style.zIndex = -3;
    backPanel.style.zIndex = 3;
  }

  if (e.target.classList.contains("giphyImg__Front3")) {
    console.log("clicked! 3")
    frontPanel.style.zIndex = -3;
    backPanel.style.zIndex = 3;
  }

  if (e.target.classList.contains("giphyImg__Back1")) {
    frontPanel.style.zIndex = 3;
    backPanel.style.zIndex = -3;
  }

  if (e.target.classList.contains("giphyImg__Back2")) {
    frontPanel.style.zIndex = 3;
    backPanel.style.zIndex = -3;
  }

  if (e.target.classList.contains("giphyImg__Back3")) {
    frontPanel.style.zIndex = 3;
    backPanel.style.zIndex = -3;
  }
})