时间戳

首页 > 解决方案 > 当我移动到网站中的其他页面时，无法读取 null 的属性“addEventListener”

javascript - 当我移动到网站中的其他页面时，无法读取 null 的属性“addEventListener”

问题描述

我开始使用一个具有多个页面的模型网站，并且因为我对 javascript 很陌生，所以我遇到了以下问题。我开始在我的代码上的不同元素上放置一些事件侦听器，但由于某些原因，当我导航到不同的页面时，我得到一个“无法读取 null 属性”类型的错误。

到目前为止，我已经尝试过：

什么都不起作用！

我想指定一些我想放置事件的元素，在 css 中不显示。您可以在下面查看我第一次遇到问题的页面之一。

我希望我正确地表达了自己:)

HTML

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Rock Festival</title>
    <meta name="author" content="Your Name">
    <meta name="description" content="Example description">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="responsive.css">
</head>

<div id="site-wrapper">
<body>
    
    <section id="main-nav" class="d-between">
       <div class="nav-logo">ROCKA</div>
       <div class="nav-item d-between">
          <a href="index.html" class="nav-link">home</a>
          <a href="lineup.html" class="nav-link">lineup</a>
          <a href="location.html" class="nav-link active">location</a>
          <a href="tickets.html" class="nav-link">tickets</a>
          <a href="" class="nav-link">activities</a>
          <a href="" class="nav-link">contest</a>
          <a href="" class="nav-link">food court</a>
       </div>
    </section>
    
<!--    LOCATION SECTION-->
   
     <section id="location" class="d-column">
         <div class="location-img d-flex">KIMBERLY PARK</div>
         <div class="container d-column">
             <div class="kimberly-details d-column">
                 <img src="..//Graphics/Location/Icons/montains-01.png" alt="" class="img-intro">
                 <p class="about-kimberly">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aliquam saepe beatae doloremque quae odio ullam tempora accusantium. Quia voluptates mollitia, est quidem qui quibusdam nulla ad architecto. Pariatur corporis explicabo reprehenderit nulla vitae neque, nemo necessitatibus, eligendi ex asperiores ut accusamus laboriosam eum quos numquam animi eos ab, deserunt rerum illum. Cupiditate aut ea, enim tempore unde facere eveniet eum ipsum quaerat. Temporibus similique nulla fuga odio officiis hic eveniet perspiciatis explicabo inventore, iusto necessitatibus sit tenetur nostrum qui eum corrupti, recusandae dignissimos illum amet. Illum sit dicta dolore magni nostrum incidunt similique accusamus, quasi. Cum ratione corporis cupiditate.</p>
             </div>
             
             
             <div class="kimberly-photos d-column">
               
                <div class="lightbox-overlay off d-column">
                     <div id="light-img" class="lightbox-content d-column">
                        <img src="" alt="" class="lightbox-img">
                         <div class="lightbox-close">X</div>
                     </div>
                 </div>
                 
                 <div class="collage-content d-flex">
                <img src="..//Graphics/Location/Gallery/pic_1.jpg" alt="" class="img-collage">
                <img src="..//Graphics/Location/Gallery/pic_2.jpg" alt="" class="img-collage">
                <img src="..//Graphics/Location/Gallery/pic_3.jpg" alt="" class="img-collage">
                <img src="..//Graphics/Location/Gallery/pic_4.jpg" alt="" class="img-collage">
                <img src="..//Graphics/Location/Gallery/pic_5.jpg" alt="" class="img-collage">
                <img src="..//Graphics/Location/Gallery/pic_6.jpg" alt="" class="img-collage">
                <img src="..//Graphics/Location/Gallery/pic_7.jpg" alt="" class="img-collage">
                <img src="..//Graphics/Location/Gallery/pic_8.jpg" alt="" class="img-collage">
                <img src="..//Graphics/Location/Gallery/pic_9.jpg" alt="" class="img-collage">
                <img src="..//Graphics/Location/Gallery/pic_10.jpg" alt="" class="img-collage">
                <img src="..//Graphics/Location/Gallery/pic_11.jpg" alt="" class="img-collage">
                <img src="..//Graphics/Location/Gallery/pic_12.jpg" alt="" class="img-collage">
                
                
                 </div>
             </div>
             
         </div>
     </section>

     <section id="general-footer" class="d-flex">
         <div class="container d-between">
             <div class="footer-left-content">
                 <div class="footer-logo">ROCKA</div>
                 <div class="footer-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, nemo corporis provident sapiente magnam illo natus porro quis officia.</div>
             </div>
             <div class="footer-center-content d-flex">
                 <div class="footer-column">
                     <p>location</p>
                     <p>lineup</p>
                     <p>tickets</p>
                 </div>
                 <div class="footer-column">
                     <p>activities</p>
                     <p>contest</p>
                     <p>food court</p>
                 </div>
                 <div class="footer-column">
                     <p>contact</p>
                 </div>
             </div>
             <div class="footer-right-content d-flex">
                 <div class="footer-text-2">Follow us on</div>
                 <div class="footer-social">
                     <img src="..//Graphics/social/facebook-01.png" alt="">
                     <img src="..//Graphics/social/instagram-01.png" alt="">
                     <img src="..//Graphics/social/youtube-01.png" alt="">
                 </div>
             </div>
         </div>
      </section>
          
      </body>
      <script type="text/javascript" src="app.js"></script>
    </div>
</html>

JS

const imgCollage = document.querySelectorAll('.img-collage');
const lightBoxClose = document.querySelector('.lightbox-close');
const lightBoxOverlay = document.querySelector('.lightbox-overlay');
const imgContent = document.querySelector('.lightbox-img');


loadEventListeners();


function loadEventListeners() {
    
    lightBoxClose.addEventListener('click', closeModal);
    imgCollage.forEach(img=>img.addEventListener('click', openOnClick));
    
 };


function openOnClick() {
    lightBoxOverlay.classList.toggle('off');
    imgContent.src = this.src;
};

function closeModal(){[enter image description here][1]
    lightBoxOverlay.classList.toggle('off');
};

标签： javascripthtml

解决方案

由于display none您将在 querySelectors 中获得未定义，因此您无法向其添加侦听器。Display none 将从 DOM 中删除您的元素。有一些方法可以解决它：

  1. 检查变量是否存在并添加侦听器，但是当您将元素设置为不显示时，您应该移除事件侦听器。

  2. 使用可见性：隐藏- 这只会隐藏您的元素，但仍会在 DOM 中呈现

推荐阅读