using for loop and getting: "Cannot read property 'getAttribute' of undefined'

Question

I'm having a hard time trying to figure out why the console is returning "Uncaught TypeError: Cannot read property 'getAttribute' of undefined". What I want is for my code to display the full image of the picture the user has clicked on. Hence the for loop. According to the Googling I have done the error occur or may occur because the "image" object's not yet loaded when the method gets called. Still, I'm unsure how to go about solving this issue. Looking forward to hearing from you.

const fullImg = document.querySelector(".full-img");
const smallImg = document.querySelectorAll(".gallery img");
const modal = document.querySelector(".modal");




for(var i = 0; i < smallImg.length; i++) {
  smallImg[i].addEventListener("click", function(){
    modal.classList.add("open");
    fullImg.classList.add("open");

    const originalQuality = smallImg[i].getAttribute('alt');
    value.src = `img/full/${originalQuality}.jpg`
  })
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Project #2 - Image Gallery Pop up</title>
  </head>
  <body>
    <section class="gallery">
      <!-- Image 1 -->
      <div class="img-container">
        <img src="img/small/pexels-anna-shvets-4588065.jpg" alt="1" />
      </div>

      <!-- Image 2 -->
      <div class="img-container">
        <img src="img/small/pexels-anthony-139639.jpg" alt="2" />
      </div>

      <!-- Image 3 -->
      <div class="img-container">
        <img src="img/small/pexels-burst-374825.jpg" alt="3" />
      </div>

      <!-- Image 4 -->
      <div class="img-container">
        <img src="img/small/pexels-carlos-spitzer-17811.jpg" alt="4" />
      </div>

      <!-- Image 5 -->
      <div class="img-container">
        <img src="img/small/pexels-charles-1851164.jpg" alt="5" />
      </div>

      <!-- Image 6 -->
      <div class="img-container">
        <img src="img/small/pexels-frans-van-heerden-631292.jpg" alt="6" />
      </div>

      <!-- Image 7 -->
      <div class="img-container">
        <img src="img/small/pexels-gratisography-4602.jpg" alt="7" />
      </div>

      <!-- Image 8 -->
      <div class="img-container">
        <img src="img/small/pexels-jan-kopřiva-3614358.jpg" alt="8" />
      </div>

      <!-- Image 9 -->
      <div class="img-container">
        <img src="img/small/pexels-jeremy-bishop-2422915.jpg" alt="9" />
      </div>
      <!-- Image 10 -->
      <div class="img-container">
        <img src="img/small/pexels-jim-long-949859.jpg" alt="10" />
      </div>
    </section>

    <!-- modal -->
    <div class="modal">
      <img src="img/full/1.jpg" alt="" class="full-img" />
    </div>

    <script src="app.js"></script>
  </body>
</html>

Instead of `const originalQuality = smallImg[i].getAttribute('alt');` it should be `const originalQuality = this.getAttribute('alt');` because `i` is undefined when the event handler is called. In the next line `value.src` is presumably `fullImg.src`... — biberman, Jul 06 '21 at 10:50

using for loop and getting: "Cannot read property 'getAttribute' of undefined'

0 Answers0