Uncaught TypeError: Невозможно прочитать свойство 'id' из undefined в HTMLDivElement - PullRequest
Новая
       24

Uncaught TypeError: Невозможно прочитать свойство 'id' из undefined в HTMLDivElement

0 голосов
/ 11 октября 2018

Я работаю над этим кодом изображения Карусель и получаю сообщение об ошибке при последней функции.я хочу зациклить изображение, как только оно попадет на конечное изображение.

Это ошибка, которую я получаю:

Uncaught TypeError: Невозможно прочитать свойство 'id' изне определено в HTMLDivElement.slide.addEventListener (файл: /// C: / Users / uu / Desktop / New% 20folder% 20 (3) /slider.js:27:25)

HTML-код: 

<html>
<head>
    <title>image slider project</title>
   <link rel="stylesheet" type="text/css" href="slider.css">  
</head>

<body>

<div class="container">
       <div class="slide">
            <img src="./bcg/img5.jpg" id="lastclone">
            <img src="./bcg/img1.jpeg">
            <img src="./bcg/img2.jpeg">
            <img src="./bcg/img3.jpeg">
            <img src="./bcg/img4.jpeg">
            <img src="./bcg/img5.jpg">
            <img src="./bcg/img1.jpeg" id="firstclone">
        </div>
       </div>

       <button class="pbtn">prevbtn</button>
       <button class="nbtn">nextbtn</button>

       <script type="text/javascript" src="slider.js"></script>
</body>
</html>

Javascript код: 

var slide = document.querySelector(".slide");
var slideimg = document.querySelectorAll(".slide img");
var prevbtn = document.querySelector(".pbtn");
var nextbtn = document.querySelector(".nbtn");

var counter = 1;
var size = slideimg[0].clientWidth;

slide.style.transform = "translateX(" + (-size * counter) + "px)";

nextbtn.addEventListener("click", next);
prevbtn.addEventListener("click", prev);

function next() {
  slide.style.transition = "transform 0.4s ease-in-out";
  counter++;
  slide.style.transform = "translateX(" + (-size * counter) + "px)";
}

function prev() {
  slide.style.transition = "transform 0.4s ease-in-out";
  counter--;
  slide.style.transform = "translateX(" + (-size * counter) + "px)";
}

slide.addEventListener("transitionend", () => {
  if (slideimg[counter].id === "lastclone") {
    slide.style.transition = "none";
    counter = slideimg.lenght - 2;
    slide.style.transform = "translateX(" + (-size * counter) + "px)";
  }
});

1 Ответ

0 голосов
/ 11 октября 2018

Если вы столкнетесь с такой проблемой, попробуйте подумать о возможных причинах такой вещи.

В этом случае ошибка довольно проста: Uncaught TypeError: Невозможно прочитать свойство'id' не определен в HTMLDivElement.slide.addEventListener (файл: /// C: / Users / uu / Desktop / New% 20folder% 20 (3) /slider.js:27:25)

Это означает, что у вас есть ошибка в строке 27, столбец 25. Он пытается прочитать свойство 'id' (slideimg [counter] .id ) из undefined .Это означает, что slideimg [counter] возвращает неопределенное значение.

Чтобы выполнить процесс отладки, у вас есть 3 варианта:

1) вы можете определить ошибку, просто посмотрев код

2) добавить журналы переменных, которые используются в данном конкретном месте: 

slide.addEventListener("transitionend", () => {
  console.log( slideimg, counter );
  if (slideimg[counter].id === "lastclone") {
    slide.style.transition = "none";
    counter = slideimg.lenght - 2;
    slide.style.transform = "translateX(" + (-size * counter) + "px)";
  }
});

3) использовать функцию отладки вашего браузера, чтобы получить более полное представление о том, что происходит под капотом: 

slide.addEventListener("transitionend", () => {
  // by adding this statement here, code execution will stop at runtime at this
  // particular place
  debugger;
  if (slideimg[counter].id === "lastclone") {
    slide.style.transition = "none";
    counter = slideimg.lenght - 2;
    slide.style.transform = "translateX(" + (-size * counter) + "px)";
  }
});

Подробнее здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger

...