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

Question

Soo，我完全是 javascript 的初学者，我已经获得了轮播代码（来自本教程：https://www.youtube.com/watch?v=gor5BvT2z88），它只存在于其中一个页面上。我需要在代码中添加什么，这样当我在不包含此轮播的其他页面上时，我不会收到此错误：Uncaught TypeError: Cannot read properties of null (reading '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>

Answer 1

您可以在添加侦听器之前检查该元素是否存在。所以而不是

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

你可以做到

let nextButton = document.getElementById('carousel__button--next')

然后检查它是否存在

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');

Answer 2

当您的代码依赖于特定元素的存在时，谨慎的做法是在使用它的任何函数的顶部添加一个“存在保护”，如下所示：

// 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);
}

Answer 3

由于此代码在未使用该功能的页面上寻找与轮播相关的 DOM 元素，因此引发了相关错误。虽然当前的答案确实有助于解决问题，但我觉得有一种更好的解决方法也可以用于许多其他场景，其中页面特定的功能可以根据需要 included/excluded：

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

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

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

javascript ignore code if targeted element isn't existing on the page

javascript

carousel