Simplify JS code using Nuxt.js not working

Question

I have a photo gallery in JavaScript, using Nuxt.js. In the photo gallery, it get the images and (on click), display them in full screen. Everything is working well, but my code is not really good (it can be improved, because it's repetitive). Here is my actual JS, SCSS and Vue code :

window.addEventListener('load', function () {
  // Add the photo corresponding to the one in the photo gallery, to the photo gallery full screen
  const photo = document.querySelectorAll(".photo");
  
  for (let i = 0; i < photo.length; i++) {
    const style = photo[i].currentStyle || window.getComputedStyle(photo[i], false);
    const photoBackground = style.backgroundImage.replace(/url$(['"])?(.*?)\1$/gi, '$2').split(',')[0];
    const photoFullscreen = document.querySelectorAll(".photo-fullscreen");
    photoFullscreen[i].setAttribute("src", photoBackground);
  }

  // Open PopUp
  const photoGalleryFullscreen = document.querySelector(".photo-gallery-fullscreen");
  const imageFullscreen1 = document.querySelector(".slide-container img:nth-child(1)");
  const imageFullscreen2 = document.querySelector(".slide-container img:nth-child(2)");
  const imageFullscreen3 = document.querySelector(".slide-container img:nth-child(3)");

  document.querySelector(".lienImg1").onclick = function() {
    photoGalleryFullscreen.style.display = "block";
    imageFullscreen1.style.display = "block";
    slideIndex = 1;
  };

  document.querySelector(".lienImg2").onclick = function() {
    photoGalleryFullscreen.style.display = "block";
    imageFullscreen2.style.display = "block";
    slideIndex = 2;
  };

  document.querySelector(".lienImg3").onclick = function() {
    photoGalleryFullscreen.style.display = "block";
    imageFullscreen3.style.display = "block";
    slideIndex = 3;
  };

  // Close PopUp
  document.querySelector(".out").onclick = function() {
    photoGalleryFullscreen.style.display = "none";
    imageFullscreen1.style.display = "none";
    imageFullscreen2.style.display = "none";
    imageFullscreen3.style.display = "none";
    slideIndex = 1;
  };
});

// Gallery Full Screen
let slideIndex;

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function showSlides(n) {
  let i;
  let slides = document.querySelectorAll(".photo-fullscreen");
  if (n > slides.length) {
    slideIndex = 1
  }    
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slides[slideIndex-1].style.display = "block";
}

// Photo Gallery
.photo-gallery-section {
  margin: 50px 0;

  .photo-gallery {
    width: fit-content;
    margin: auto;

    display: grid;
    grid-template-rows: 250px;
    grid-template-columns: repeat(3, 250px);
    justify-content: space-between;
    gap: 3vw;

    .photo:hover {
      cursor: pointer;
    }

    .photo:nth-child(1) {
      background: url(../static/images/yoga.jpg) center center / cover;
    }

    .photo:nth-child(2) {
      background: url(../static/images/yoga-2.jpeg) center center / cover;
    }

    .photo:nth-child(3) {
      background: url(../static/images/yoga-3.jpeg) center center / cover;
    }
  }

  .photo-gallery-fullscreen {
    display: none;
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;

    .slide-container {
      width: fit-content;
      margin: calc(50vh - 225px) auto;

      img {
        height: 450px;
        z-index: 3;
        display: none;
      }
    }

    .prev,
    .next {
      cursor: pointer;
      color: white;
      text-shadow: 0.8px 0.8px 4px white;
      font-weight: bold;
      font-size: 40px;
      z-index: 3;
      position: absolute;
    }

    .prev {
      margin: calc(50vh - 21px) 0;
      margin-left: 15vw;
      left: 0;
    }

    .next {
      margin: calc(50vh - 21px) 0;
      margin-right: 15vw;
      right: 0;
    }

    .out {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 2;
    }
  }
}

    
      Gallerie Photo

      
        
        
        
      

      
        ❮
        ❯

Now I want to simplify the code but it's not working. Here is the new part of code :

  // Open PopUp
  const photoGalleryFullscreen = document.querySelector(".photo-gallery-fullscreen");
  const imagesFullscreen = document.querySelectorAll(".slide-container img");
  
  for (let i = 0; i < imagesFullscreen.length; i++) {
    document.querySelectorAll(".photo").onclick = function() {
      photoGalleryFullscreen.style.display = "block";
      imagesFullscreen[i].style.display = "block";
      slideIndex = i;
    }
  }

Thank you very much for your help, Maxime

EDIT : Here is the new code that is working :

  // Open PopUp
  const photoGalleryFullscreen = document.querySelector(".photo-gallery-fullscreen");
  const imagesFullscreen = document.querySelectorAll(".slide-container img");
  
  for (let i = 0; i < imagesFullscreen.length; i++) {
    photo[i].onclick = function() {
      photoGalleryFullscreen.style.display = "block";
      imagesFullscreen[i].style.display = "block";
      slideIndex = i;
    }

      // Close PopUp
    document.querySelector(".out").onclick = function() {
      photoGalleryFullscreen.style.display = "none";
      imagesFullscreen[i].style.display = "none";
      slideIndex = 1;
    };
  }

Simplify JS code using Nuxt.js not working

0 Answers