Невозможно добавить eventListener в javascript к стрелке, созданной css - PullRequest
Новая
       4

Невозможно добавить eventListener в javascript к стрелке, созданной css

0 голосов
/ 04 августа 2020

Я работаю над содержимым слайдера изображений, используя html, css и javascript. Для перехода к следующему и предыдущему изображениям я создал стрелки, используя css, и они появляются на веб-странице. Но при попытке добавить eventListener к этой стрелке он показывает невозможность добавления. Ниже мои коды html и css: 

let sliderImages = document.querySelectorAll(".slide");
let arrowLeft = document.querySelector("#arrow-left");
let arrowRight = document.querySelector("#arrow-right");
let current = 0;

// Clear all images
function reset() {
  for (let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
  }
}

// Init slider
function startSlide() {
  reset();
  sliderImages[0].style.display = "block";
}

// Show prev
function slideLeft() {
  reset();
  sliderImages[current - 1].style.display = "block";
  current--;
}

// Show next
function slideRight() {
  reset();
  sliderImages[current + 1].style.display = "block";
  current++;
}

// Left arrow click
arrowLeft.addEventListener("click", function() {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

// Right arrow click
arrowRight.addEventListener("click", function() {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});

startSlide();
.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -35px;
  width: 0;
  height: 0;
  border-style: solid;
}

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

#arrow-right {
  border-width: 30px 0 30px 40px;
  border-color: transparent transparent transparent #fff;
  right: 0;
  margin-right: 30px;
}
<div class="wrap">
  <div id="arrow-left" class="arrow">.</div>
  <div id="slider">
    <div class="slide slide1">
      <div class="slide-content">
        <span>Welcome to Bruno's Pizzeria</span>
      </div>
    </div>
    <div class="slide slide2">
      <div class="slide-content">
        <span>Welcome to Bruno's Pizzeria</span>
      </div>
    </div>
    <div class="slide slide3">
      <div class="slide-content">
        <span>Welcome to Bruno's Pizzeria</span>
      </div>
    </div>
  </div>
  <div id="arrow-right" class="arrow">.</div>
</div>

Браузер показывает следующую ошибку: 

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at slider.js:34

Ответы [ 2 ]

1 голос
/ 04 августа 2020

Ваш JavaScript правильный. Но я думаю, что проблема в последовательности загрузки веб-страницы. Чтобы ваш код работал правильно, вам необходимо убедиться, что файл javascript загружается после того, как файл HTML будет полностью отрисован (поскольку он использует элементы DOM).

Вот несколько способов убедиться, что JavaScript файл загружается после HTML

  • Добавить тег скрипта после или непосредственно перед закрывающим тегом тела 
...
</body>
<script src="script.js"></script>
</html>
  • Добавить атрибут defer в тег скрипта 
<head>
...
<script src="script.js" defer></script>
...
  • Использовать событие загрузки окна как 
window.addEventListener('load', function(){
        // your complete code
})

// OR

window.onload = function(){
       // your code
}
0 голосов
/ 04 августа 2020

включает ваш slider.js файл в последний тег HTML body. Потому что элемент DOM со стрелкой влево и вправо будет иметь доступ только после загрузки. 

let sliderImages = document.querySelectorAll(".slide");
let arrowLeft = document.querySelector("#arrow-left");
let arrowRight = document.querySelector("#arrow-right");
let current = 0;

// Clear all images
function reset() {
  for (let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
  }
}

// Init slider
function startSlide() {
  reset();
  sliderImages[0].style.display = "block";
}

// Show prev
function slideLeft() {
  reset();
  sliderImages[current - 1].style.display = "block";
  current--;
}

// Show next
function slideRight() {
  reset();
  sliderImages[current + 1].style.display = "block";
  current++;
}

// Left arrow click
arrowLeft.addEventListener("click", function() {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

// Right arrow click
arrowRight.addEventListener("click", function() {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});

startSlide();
.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -35px;
  width: 0;
  height: 0;
  border-style: solid;
}

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

#arrow-right {
  border-width: 30px 0 30px 40px;
  border-color: transparent transparent transparent #fff;
  right: 0;
  margin-right: 30px;
}
<div class="wrap">
  <div id="arrow-left" class="arrow"><<</div>
  <div id="slider">
    <div class="slide slide1">
      <div class="slide-content">
        <span>Welcome to Bruno's Pizzeria 1</span>
      </div>
    </div>
    <div class="slide slide2">
      <div class="slide-content">
        <span>Welcome to Bruno's Pizzeria 2</span>
      </div>
    </div>
    <div class="slide slide3">
      <div class="slide-content">
        <span>Welcome to Bruno's Pizzeria 3</span>
      </div>
    </div>
  </div>
  <div id="arrow-right" class="arrow">>></div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...