Функция TypeError является нулевой на других HTML-страницах

Question

У меня большая проблема.Я написал функцию для полноэкранного слайдера изображений.Функция хорошо работает на моей странице index.html, но на других страницах HTML я получаю эту ошибку в консоли:

TypeError: arrowLeft равен нулю http://127.0.0.1:5501/Core/app.js:24

в Mozilla Firefox и

Uncaught TypeError: Невозможно прочитать свойство 'addEventListener' с нулевым значением в app.js: 24

в Google Chrome

и эта ошибка также вызывает другие проблемы.

Кто-нибудь знает, почему это происходит?

HTML:

 <!-- !Showcase -->
  <div id="showcase">
    <div id="arrow-left" class="arrow"></div>
    <div id="slider">
      <div class="slide slide1"></div>
      <div class="slide slide2 "></div>
      <div class="slide  slide3"></div>
    </div>
    <div id="arrow-right" class="arrow"></div>
  </div>

!!!!! CSS !!!!!!!!!!

// Showcase!
#showcase,
#slider,
.slide-content {
    height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

#showcase {
    position: relative;
    height: 100vh;
    width: 100%;
}

.slide {
    width: 100%;
    height: 100%;
}

.slide1 {
    background: url(/Core/img/lazar1.jpg) no-repeat center center/cover;
}

.slide2 {
    background: url(/Core/img/lazar2.jpg) no-repeat center center/cover;
}

.slide3 {
    background: url(/Core/img/lazar3.jpg) no-repeat center center/cover;
}

.arrow {
    cursor: pointer;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    border-style: solid;
}


#arrow-left {
    border-width: 30px 40px 30px 0;
    border-color: transparent blue transparent transparent;
    left: 0;
    margin-left: 30px;
}

#arrow-right {
    border-width: 30px 0 30px 40px;
    border-color: transparent blue transparent blue;
    right: 0;
    margin-right: 30px;
}

!!!!!!! JAVASCRIPT !!!!!!!!!!!
//FOR SLIDER    
let sliderImages = document.querySelectorAll(".slide"),
    arrowLeft = document.querySelector("#arrow-left"),
    arrowRight = document.querySelector("#arrow-right"),
    current = 0;

function reset() {
    for (let i = 0; i < sliderImages.length; i++) {
        sliderImages[i].style.display = 'none';
    }
}

function startSlide() {
    reset();
    sliderImages[0].style.display = 'block';
}

function slideLeft() {
    reset();
    sliderImages[current - 1].style.display = 'block';
    current--;
}

arrowLeft.addEventListener('click', function (e) {
    if (current === 0) {
        current = sliderImages.length;
    }
    slideLeft();
})


function slideRight() {
    reset();
    sliderImages[current + 1].style.display = 'block';
    current++;
}
arrowRight.addEventListener('click', function (e) {
    if (current === sliderImages.length - 1) {
        current = -1;
    }
    slideRight();
})

startSlide();

Answer 1

Наконец, через 2 часа я решил проблему. Моя функция работала на всех страницах, поэтому страницы без слайдера не t have the html code and my function was looking for them that почему первая страница работала, а на других давала мне «ноль». Спасибо за попытку помочь мне.