forEach loop in JS is only selecting one image from my gallery?

Question

I have a image gallery with some JavaScript that shows a specific image from the gallery in a larger format whenever you click on a magnifying glass icon.

The button itself seems to work fine but it appears to only select the same image from the gallery and not the specific image that is being clicked on.

HTML:

function getPics() {}
const imgs = document.querySelectorAll('.card img');
const fullPage = document.querySelector('#full-page');
const imagePage = document.querySelector('#image-page');
const glasses = document.querySelectorAll('.card .mglass i');

glasses.forEach(i => {
  i.addEventListener('click', function() {
    imgs.forEach(img => {
      imagePage.style.backgroundImage = 'url(' + img.src + ')';
      fullPage.style.display = 'block';
    });
  });
});

<div id="full-page" onclick="this.style.display='none'">
  <div id="image-page"></div>
</div>

<div class="grid-container">

  <div id="grid" class="dog-grid">
    <div class="card stack">
      <img src="Images/Galerij/IMG_7877.jpg" alt="" class="card_img">
      <div class="mglass">
        <i class="fa-solid fa-magnifying-glass-plus fa-2xl"></i>
      </div>
    </div>
    <div class="card stack">
      <img src="Images/Galerij/IMG_7945.jpg" alt="" class="card_img">
      <div class="mglass">
        <i class="fa-solid fa-magnifying-glass-plus fa-2xl"></i>
      </div>
    </div>
    <div class="card stack third-edit">
      <img src="Images/Galerij/IMG_7983.jpg" alt="" class="card_img">
      <div class="mglass">
        <i class="fa-solid fa-magnifying-glass-plus fa-2xl"></i>
      </div>
    </div>
    <div class="card stack">
      <img src="Images/Galerij/IMG_8038.jpg" alt="" class="card_img">
      <div class="mglass">
        <i class="fa-solid fa-magnifying-glass-plus fa-2xl"></i>
      </div>
    </div>
    <div class="card stack fifth-edit">
      <img src="Images/Galerij/IMG_8066.jpg" alt="" class="card_img">
      <div class="mglass">
        <i class="fa-solid fa-magnifying-glass-plus fa-2xl"></i>
      </div>
    </div>
    <div class="card stack">
      <img src="Images/Galerij/IMG_8094.jpg" alt="" class="card_img">
      <div class="mglass">
        <i class="fa-solid fa-magnifying-glass-plus fa-2xl"></i>
      </div>
    </div>
    <div class="card stack">
      <img src="Images/Galerij/IMG_8114.jpg" alt="" class="card_img">
      <div class="mglass">
        <i class="fa-solid fa-magnifying-glass-plus fa-2xl"></i>
      </div>
    </div>
    <div class="card stack eight-edit">
      <img src="Images/Galerij/IMG_8124.jpg" alt="" class="card_img">
      <div class="mglass">
        <i class="fa-solid fa-magnifying-glass-plus fa-2xl"></i>
      </div>
    </div>
  </div>

Whenever i tried this with the image itself having to be clicked it worked fine. I feel like it could possibily be because the "img" has no event to be triggerd from with the button method.

If this is the case, how would i go about this?

Answer 1

glasses.forEach(i => { 
  i.addEventListener('click', function(event) {
    const img = event.target.closest('.card').querySelector('.card_img');
    imagePage.style.backgroundImage = 'url(' + img.src + ')';
    fullPage.style.display = 'block';
  });
});