Javascript 未捕获类型错误：无法读取属性'；id'；在HTMLDEVELENT未定义的_Javascript_Html_Carousel_Slideshow

Javascript 未捕获类型错误：无法读取属性'；id'；在HTMLDEVELENT未定义的

javascript html

Javascript 未捕获类型错误：无法读取属性'；id'；在HTMLDEVELENT未定义的,javascript,html,carousel,slideshow,Javascript,Html,Carousel,Slideshow,我正在处理一个图像旋转木马的代码，最后一个函数出现错误。我想要的是在图像到达最终图像后循环图像这是我得到的错误：未捕获的TypeError:无法读取未定义的属性“id” 在htmldevelment.slide.addEventListener(file:///C:/Users/uu/Desktop/New%20folder%20（3） /slider.js:27:25） HTML代码： <html> <head> <title>image sli

我正在处理一个图像旋转木马的代码，最后一个函数出现错误。我想要的是在图像到达最终图像后循环图像

这是我得到的错误：

未捕获的TypeError:无法读取未定义的属性“id” 在htmldevelment.slide.addEventListener(file:///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>

如果你遇到这种问题，试着想想发生这种事情的可能原因

在这种情况下，错误非常严重：Uncaught TypeError:无法读取HtmlVelment.slide.addEventListener中未定义的属性“id”(file:///C:/Users/uu/Desktop/New%20folder%20（3） /slider.js:27:25）

这意味着第27行第25列有一个错误。它正在尝试读取未定义的属性“id”（slideimg[counter].id）。这意味着slidemg[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)";
  }
});

更多信息：

slideimg[counter]

未定义。控制台日志

counter

在事件侦听器中查看它试图访问哪个元素类型：您有

slideimg.length

而不是

slideimg.length

。现在想一想为什么这会导致上述错误，以便您下次能够更好地理解和解决此类问题：拼写错误意味着您正在访问对象

slideimg

上不存在的属性

lenght

。不存在的属性总是产生未定义的

。然后您就有了本质上未定义的-2，它是NaN（“非数字”），因为您不能从非数字中减去一个数字。下一次，您将访问slideimg[NaN]
，这也是未定义的
，因此您将执行未定义的.id！非常感谢，兄弟，你刚刚救了我的命，我实际上是在审核每一个单词，但我觉得我太不知所措了，所以我无法集中精力。长度。不管怎样，它现在起作用了。
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)";
  }
});