Fatal编程技术网
  • javascript/
  • Javascript 未捕获类型错误：无法读取属性'；风格'；未定义HTML的定义

Javascript 未捕获类型错误：无法读取属性'；风格'；未定义HTML的定义

javascript html css

Javascript 未捕获类型错误：无法读取属性'；风格'；未定义HTML的定义,javascript,html,css,Javascript,Html,Css,我已经为我的页面中的图像创建了一个幻灯片部分！！我已经为它编写了HTML、CSS和Javascript，但是当我在chrome中运行它时，我得到了以下Javascript错误： 未捕获类型错误：无法读取未定义的属性“样式” showsslides@slideshow.js:24 （匿名函数）@slideshow.js:2 幻灯片框架工作正常且可见，但幻灯片的第一个图像不会自动显示。我必须单击“前进”或“后退”按钮才能真正查看图片！！我猜这是因为这个javascript错误 有人能帮我修复这个Ja

我已经为我的页面中的图像创建了一个幻灯片部分！！我已经为它编写了HTML、CSS和Javascript，但是当我在chrome中运行它时，我得到了以下Javascript错误：

未捕获类型错误：无法读取未定义的属性“样式”

showsslides@slideshow.js:24

（匿名函数）@slideshow.js:2

幻灯片框架工作正常且可见，但幻灯片的第一个图像不会自动显示。我必须单击“前进”或“后退”按钮才能真正查看图片！！我猜这是因为这个javascript错误

有人能帮我修复这个Javascript错误吗？？

以下是我的HTML、CSS和Javascript文件的代码：

HTML部分：

<div class="slideShow" style="height: 700px;">
<script type="text/javascript" src="../Data/Scripts/Java/slideshow.js"></script>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 9</div>
<center>
<img src="../Data/Images/iphone7_plusReview/img_01.jpg">
</center>
<div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
<div class="numbertext">2 / 9</div>
<center>
<img src="../Data/Images/iphone7_plusReview/img_02.jpg">
</center>
<div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
<div class="numbertext">3 / 9</div>
<center>
<img src="../Data/Images/iphone7_plusReview/img_03.jpg">
</center>
<div class="text">Caption Three</div>
</div>

<div class="mySlides fade">
<div class="numbertext">4 / 9</div>
<center>
<img src="../Data/Images/iphone7_plusReview/img_04.jpg">
</center>
<div class="text">Caption Four</div>
</div>

<div class="mySlides fade">
<div class="numbertext">5 / 9</div>
<center>
<img src="../Data/Images/iphone7_plusReview/img_05.jpg">
</center>
<div class="text">Caption Five</div>
</div>

<div class="mySlides fade">
<div class="numbertext">6 / 9</div>
<center>
<img src="../Data/Images/iphone7_plusReview/img_06.jpg">
</center>
<div class="text">Caption Six</div>
</div>

<div class="mySlides fade">
<div class="numbertext">7 / 9</div>
<center>
<img src="../Data/Images/iphone7_plusReview/img_07.jpg">
</center>
<div class="text">Caption Seven</div>
</div>

<div class="mySlides fade">
<div class="numbertext">8 / 9</div>
<center>
<img src="../Data/Images/iphone7_plusReview/img_08.jpg">
</center>
<div class="text">Caption Eight</div>
</div>

<div class="mySlides fade">
<div class="numbertext">9 / 9</div>
<center>
<img src="../Data/Images/iphone7_plusReview/img_09.png">
</center>
<div class="text">Caption Nine</div>
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span> 
<span class="dot" onclick="currentSlide(2)"></span> 
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span> 
<span class="dot" onclick="currentSlide(5)"></span> 
<span class="dot" onclick="currentSlide(6)"></span> 
<span class="dot" onclick="currentSlide(7)"></span> 
<span class="dot" onclick="currentSlide(8)"></span> 
<span class="dot" onclick="currentSlide(9)"></span> 
</div>
</div>
还有我的slideshow.js Javascript文件，据chrome所说，该文件可能有错误

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  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";
}

var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i
Chrome说我在第2行和第24行有错误，但我不明白错误是什么能否请一些人帮我修复此错误？任何帮助都将不胜感激：）

我实际上没有找到解决方案，但我的主要问题是，页面加载时应自动加载幻灯片的所有图像，而不是使用“上一页”和“下一页”按钮

我发现我的函数在加载页面时不会自动加载，需要调用来加载它们，例如使用“上一步”和“下一步”按钮

所以我用

<body onLoad="showSlides(); viewSlides();">
onLoad属性从一开始就加载my函数，此后所有图像都会自动加载

我仍然无法解决“UncaughtTypeError:Cannotreadproperty'style'of undefined”javascript错误，但我的幻灯片和脚本运行良好，因此我对它感到满意

感谢所有试图帮助我的人，但我的问题不同，有不同的解决方案。

element
slides[slideIndex-1]
第24行不存在，console说您无法读取/更改不存在的元素的样式。知道在哪里声明吗？？在我的函数内部还是外部？你应该在自我回答问题时始终发布帮助你的代码。在您的情况下，您必须共享什么是
viewSlides（）
，以帮助其他用户。 
<body onLoad="showSlides(); viewSlides();">