使用 for 循环并获取：“无法读取未定义的属性‘getAttribute’”

如何解决使用 for 循环并获取：“无法读取未定义的属性‘getAttribute’”

我很难弄清楚为什么控制台会返回“Uncaught TypeError: Cannot read property 'getAttribute' of undefined”。我想要的是让我的代码显示用户单击的图片的完整图像。因此，for循环。根据谷歌搜索，我已经完成了错误发生或可能发生，因为在调用方法时“图像”对象尚未加载。不过，我不确定如何解决这个问题。期待您的来信。

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>

使用 for 循环并获取：“无法读取未定义的属性‘getAttribute’”

如何解决使用 for 循环并获取：“无法读取未定义的属性‘getAttribute’”

相关推荐