Как исправить ошибку Uncaught TypeError: Cannot read property 'addEventListener' of undefined?

Question

[Александр Волобуев]

Добрый день, более опытные коллеги.

Подскажите, пожалуйста, как исправить ошибку Uncaught TypeError: Cannot read property 'addEventListener' of undefined. Никак не могу понять в чем дело.

<div class="video">
  <h3>Ролик по кассам 1</h3>
  <video id="learnVideo" class="learn-video" autoplay autobuffer  controls width="640" height="360" src="<%=UrlAppendPath(global_settings.settings.portal_base_url,'attachments/kassa2/1.mp4')%>">     </video>
  <div class="playlist">
    <ul class="playlistMenu">
      <li class="videoItem" id="1">Ролик по кассам 1</li>
      <li class="videoItem" id="2">Ролик по кассам 2</li>
      <li class="videoItem" id="3">Ролик по кассам 3</li>
      <li class="videoItem" id="4">Ролик по кассам 4</li>
      <li class="videoItem" id="5">Ролик по кассам 5</li>
    </ul>
  </div>
</div>

function videoPlayer() {
  var videoItems = document.querySelectorAll(".playlistMenu .videoItem");

for (var i = 0; i <= videoItems.length; i++) {
    videoItems[i].addEventListener("click", nextMovie); //Ошибка возникает здесь
} 
}

function nextMovie() {
  var learnVideo = document.querySelector(".learn-video");
  var id_video = event.target.id;
  var nextVideo = id_video + ".mp4";
  
  learnVideo.src = "<%=UrlAppendPath(global_settings.settings.portal_base_url,'attachments/kassa2/" + nextVideo + "')%>"; //Это внутренняя функция, которая работает в нашей системе управления обучением
}

videoPlayer();

P.S. Я не профессиональный программист, поэтому буду благодарен если подскажите и укажите что можно исправить. До жути обратной связи не хватает.

Заранее Вас благодарю.

Answer 1

[Robert Bl]

Цикл работает больше, чем кол-во элементов. Уберите равно i < videoItems.length

Answer 2

[alvvi]

Вы пытаетесь на последней итерации цикла получить videoItems[videoItems.length], а его, естественно, не существует.
Правильно так:

for (var i = 0; i < videoItems.length; i++) {
    videoItems[i].addEventListener("click", nextMovie); //Ошибка больше не возникает :)
}

Comments

[Александр Волобуев]

Спасибо Вам большое. Блин... все так просто оказалось. Постараюсь быть внимательнее.