EventListener inside conditional

JavaScript
1

Hello folks!
I’m creating an image gallery. But I’m notice that I can use one function instead of two.
I Have two element who CAN calls the same similar function:

Note: This is the goal, the codepen have some comments so you can see how it works

layerImage.forEach(layer => layer.addEventListener('click', test));
buttonImage.forEach(button => button.addEventListener('click', test));

BUT to make that happen I have to use a confitional statemen to tell me when the element is clicked, use this src, if you press another one, use this other src.

function test(e) {
  if(buttonImage.addEventListener('click') === true) {
    const src = e.currentTarget.parentNode.parentNode.querySelector('img').src;
  } else if(layerImage.addEventListener('click') === true) {
    const src = e.currentTarget.parentNode.querySelector('img').src;
  }

  overlayImage.src = src;
  overlayImage.classList.add('open');
  overlayClose.style.display = 'block';
  document.querySelector('.overlay-inner').style.display = 'block';
  document.querySelector('.image__overlay').style.display = 'none';
}

There is a way to archive this? I did not find a good example .
CODEPEN: https://codepen.io/ricardorien/pen/ExZgpyQ?editors=0010
Thanks in advance!

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.