这个错误“Uncaught TypeError: Cannot read property 'style' of undefined”是什么意思？答案

【问题标题】：What does this error "Uncaught TypeError: Cannot read property 'style' of undefined" means?这个错误“Uncaught TypeError: Cannot read property 'style' of undefined”是什么意思？
【发布时间】：2020-03-01 09:00:53
【问题描述】：

我刚刚更改了 img 文件，但它显示此消息“未捕获的类型错误：无法读取未定义的属性 'style'”。我的代码有什么问题？

<body>

  <h2 style="text-align:center">Slideshow Gallery</h2>

  <div class="slideshow-container">

    <div class="mySlides fade">
      <div class="numbertext">1 / 3</div>
      <img src="COLOURBOX1.jpg" style="width:100%">
      <div class="text">Caption One</div>
    </div>

    <div class="mySlides fade">
      <div class="numbertext">2 / 3</div>
      <img src="COLOURBOX10.jpg" style="width:100%">
      <div class="text">Caption Two</div>
    </div>

    <div class="mySlides fade">
      <div class="numbertext">3 / 3</div>
      <img src="COLOURBOX2.jpg" style="width:100%">
      <div class="text">Caption Three</div>
    </div>

  </div>

  <br>

  <div style="text-align:center">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>

var slideIndex = 0;
showSlides();

这是下面的JS。而"slides[slideIndex-1].style.display = "block";"这部分有我提到的错误信息。

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}    
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}

【问题讨论】：

你能做同样的小提琴吗？
什么意思？对不起，我不明白，因为是初学者。 :(
当我运行你的代码时，我没有收到任何错误
@PrakashReddyPotlapadu，如果将代码放在 body 之前会出现错误。

标签： javascript html css

【解决方案1】：

您的代码似乎在 DOM 完全加载之前正在运行。您可以将代码放在 body 标记的底部，也可以使用 DOMContentLoaded 包装代码：

DOMContentLoaded 事件在初始 HTML 文档完全加载和解析后触发，无需等待样式表、图像和子框架完成加载。

<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    var slideIndex = 0;
    showSlides();

    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
           slides[i].style.display = "none";  
        }
        slideIndex++;
        if (slideIndex > slides.length) {slideIndex = 1}    
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block"; 
        dots[slideIndex-1].className += " active";
        setTimeout(showSlides, 2000); // Change image every 2 seconds
    }
  });
</script>

<h2 style="text-align:center">Slideshow Gallery</h2>
<div class="slideshow-container">
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="COLOURBOX1.jpg" style="width:100%">
    <div class="text">Caption One</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="COLOURBOX10.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="COLOURBOX2.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

</div>

<br>

<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

【讨论】：

这个答案是正确的。由于 javascript 在元素安装到 dom 之前正在运行。所以slides.length 给0