开发者问题收集

如果目标元素不存在于页面上，则 javascript 忽略代码

2021-09-27
173
javascript carousel

所以，我是 javascript 的完全初学者，我有这个轮播代码（来自本教程： https://www.youtube.com/watch?v=gor5BvT2z88 ），它只存在于其中一个页面上。我需要在代码中添加什么，以便当我访问不包含此轮播的其他页面时，我不会收到此错误： Uncaught TypeError：无法读取 null 的属性（读取“addEventListener”） ？ 

let slidePosition = 0;
const slides = document.getElementsByClassName('carousel__item');
const totalSlides = slides.length;

document.
getElementById('carousel__button--next')
    .addEventListener("click", function () {
        moveToNextSlide();
    });
document.
getElementById('carousel__button--prev')
    .addEventListener("click", function () {
        moveToPrevSlide();
    });

function updateSlidePosition() {
    for (let slide of slides) {
        slide.classList.remove('carousel__item--visible');
        slide.classList.add('carousel__item--hidden');
    }

    slides[slidePosition].classList.add('carousel__item--visible');
}

function moveToNextSlide() {
    if (slidePosition === totalSlides - 1) {
        slidePosition = 0;
    } else {
        slidePosition++;
    }

    updateSlidePosition();
}

function moveToPrevSlide() {
    if (slidePosition === 0) {
        slidePosition = totalSlides - 1;
    } else {
        slidePosition--;
    }

    updateSlidePosition();
}

<section id="carousel-section">
      <div class="carousel">
        <h2 class="carousel-header">FEATURED WORK</h2>
        <div class="carousel__item carousel__item--visible"><img
            src="./carousel pictures/slide show pictures/slide1.jpg" alt=""></div>
        <div class="carousel__item"><img src="./carousel pictures/slide show pictures/slide2.JPG" alt=""></div>
        <div class="carousel__item"><img src="./carousel pictures/slide show pictures/slide3.JPEG" alt=""></div>
        <div class="carousel__item"><img src="./carousel pictures/slide show pictures/slide4.JPG" alt=""></div>
        <div class="carousel__item"><img src="./carousel pictures/slide show pictures/slide5.JPG" alt=""></div>
        <div class="carousel__actions">
          <button id="carousel__button--prev" aria-label="previous slide">
            < </button> <button id="carousel__button--next" aria-label="next slide"> >
          </button>
        </div>
    </section>
3个回答

此错误是由于此代码在未使用该功能的页面上查找与轮播相关的 DOM 元素而引发的。虽然目前的答案确实有助于解决问题，但我认为还有一种更好的解决方法，这种方法在许多其他可以根据需要包含/排除页面特定功能的场景中也很有用：

正如原始问题的评论中所讨论的那样，解决此问题的简洁方法是将所有与轮播相关的代码移动到单独的 .js 文件中，并仅在明确需要此轮播功能的页面上引用该新文件。

这样，您将更整齐地细分 JavaScript 代码，减少不必要的网络、内存和处理开销， 并 避免在未利用此功能的页面上出现脚本错误。

esqew
2021-09-27

您可以在向元素添加侦听器之前检查该元素是否存在。因此，您可以这样做： 

document.getElementById('carousel__button--next')
   .addEventListener("click", function () {
       moveToNextSlide();
   });

然后检查它是否存在 

if(nextButton) {
     netxtButton.addEventListener("click", function () {
        moveToNextSlide();
     });
}

为完全确定，您还可以在 updateSlidePosition 

if(totalSlides > 0) {

    for (let slide of slides) {
        slide.classList.remove('carousel__item--visible');
        slide.classList.add('carousel__item--hidden');
    }

}

slides[slidePosition].classList.add('carousel__item--visible');
中执行此操作
Kokodoko
2021-09-27

当您的代码依赖于特定元素的存在时，最好在使用该元素的任何函数的顶部添加“存在性保护”，如下所示： 

// Look the element up somehow...using ids is usually a good strategy for convenience and speed

const requiredElement = document.getElementById('someId');
if (requiredElement !== undefined) {
   // Do all the things that work on that element
   requiredElement.addEventListener('someEvent', someHandler);
}
sh0rtwave
2021-09-27