Can't get JS to work on modal image gallery-CodePudding

I've tried half a dozen different ways of making this work, but none of them do and I'm starting to get really frustrated. I know this is definitely a newbie thing but I don't care.

I'm trying to make an art gallery with modal images, and I've followed this tutorial to the letter, literally only switching out the actual image files/paths, but it won't work. The images show up fine and the styling is fine, they transform when I hover over them, but upon actually clicking them, nothing happens. I've moved the JS code from its own linked file to the body of the main html file and that changed nothing. I've tried several different methods, including the 'official' W3Schools tutorial, and while that successfully netted me a single modal image, it refuses to work for a gallery. I tried the lightbox thing on the same site and it didn't work either. I want to stick with a similar format to the one linked above, but honestly at this point I'm about ready to throw my laptop in the river.

Please, someone tell me what I'm doing wrong.

Here's my code so far, including the css (which has been working just fine) and the js that refuses to do Anything:

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.main {
  width: 100%;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0px 60px 0px;
}

.gallery {
  display: grid;
  width: 90%;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.gallery_item {
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
}

.gallery_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s ease-in-out;
}

.gallery_item img:hover {
  transform: scale(1.1);
}

.modal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.9);
  margin-top: -1px;
  animation: zoom 0.3s ease-in-out;
}

@keyframes zoom {
  from {transform:scale(0);}
  to {transform:scale(1);}
}

.modal img {
  width: 50%;
  object-fit: cover; 
}

.closeBtn {
  color: rgba(255, 255, 255, 0.9);
  font-size: 25px;
  position: absolute;
  top: 0;
  right: 0;
  margin: 20px;
}

.closeBtn:hover {
  cursor: pointer;
}
</style>

  </head>
  
  <body>


<div >
  <h1>Gallery</h1>
  <div >
    <div >
      <img src="/pics/2016_11 chal revolution.png"/>
    </div>
    <div >
      <img src="/pics/2016_11 chal space fall.png"/>
    </div>
    <div >
      <img src="/pics/2016_11 chal.png"/>
    </div>
    <div >
      <img src="/pics/2016_11 cute bobbydane.png"/>
    </div>
    <div >
      <img src="/pics/2016_11 dane lip ring.png"/>
    </div>
    <div >
      <img src="/pics/2016_11 esther amaden.png"/>
    </div>
  </div>
</div>

<script>
const images = document.querySelectorAll(".gallery_item img");
let imgIndex;
let imgSrc;
//get images src onclick
images.forEach((img, i) => {
  img.addEventListener("click", (e) => {
    imgSrc = e.target.src;
    console.log(imgSrc);
    //run modal function
    imgModal(imgSrc);
    //index of the next image
    imgIndex = i;
  });
});

//creating the modal
let imgModal = (src) => {
  const modal = document.createElement("div");
  modal.setAttribute("class", "modal");
  //add the modal to the main section or the parent element
  document.querySelector(".main").append(modal);
  //adding image to modal
  const newImage = document.createElement("img");
  newImage.setAttribute("src", src);
  modal.append(newImage);
  //creating the close button
  const closeBtn = document.createElement("i");
  closeBtn.setAttribute("class", "closeBtn");
  //close function
  closeBtn.onclick = () => {
    modal.remove();
  };
  //next and previous buttons
  const nextBtn = document.createElement("i");
  nextBtn.setAttribute("class", "angle-right nextBtn");
  //chenge the src of current image to the src of next image
  nextBtn.onclick = () => {
    newImage.setAttribute("src",, nextImg());
  };
  const prevBtn = document.createElement("i");
  prevBtn.setAttribute("class", "angle-left prevBtn");
  //change the src of current image to the src of previous image
  prevBtn.onclick = () => {
    newImage.setAttribute("src", prevImg());
  };
modal.append(newImage, closeBtn, nextBtn, prevBtn);
};
//next image function
let nextImg = () => {
  imgIndex  ;
  //check if it is the last image
  if (imgIndex >= images.length) {
    imgIndex = 0
  }
  //return src of the new image
  return images[imgIndex].src;
};
//previous image function 
let prevImg = () => {
  imgIndex--;
  console.log(imgIndex);
  //check if it is the first image
  if (imgIndex < 0) {
    imgIndex = images.length - 1;
  }
  //return src of previous image
  return images[imgIndex].src
}

</script>

</body>
</html>

CodePudding user response：

You had typo in this code

newImage.setAttribute("src",, nextImg());

change it like this

newImage.setAttribute("src", nextImg());