手動のスライドショーが意図したとおりに動作しない

Question

私は地元のモンテッソーリのためにウェブページを改造しています。手動スライドショースクリプトを使用しようとしていますが、ページが意図したとおりに動作していません。 「onload」属性を追加しないと、スライドショー内のすべての画像が一度に表示されます。調べると、「Uncaught TypeError：未定義のプロパティ 'style'を読み取ることができません」というエラーが表示されます。ここで問題になっているHTMLのセクションである：ここで

<div class="slideshow-container"> 
    <div class="mySlides fade"> 
    <div class="numbertext">1/8</div> 
     <img src="http://i.imgur.com/hOlkQyd.jpg" width = "800" height = "600"/> 
     <div class="text">Caption One</div> 
    </div> 

    <div class="mySlides fade"> 
    <div class="numbertext">2/8</div> 
    <img src="http://i.imgur.com/79juKeU.jpg" width = "800" height = "600"/> 
    <div class="text">Caption Two</div> 
    </div> 

    <div class="mySlides fade"> 
    <div class="numbertext">3/8</div> 
    <img src="http://i.imgur.com/54B3yvz.jpg" width = "800" height = "600"/> 
    <div class="text">Caption Three</div> 
    </div> 

    <div class="mySlides fade"> 
    <div class="numbertext">4/8</div> 
    <img src="http://i.imgur.com/zsvuaoU.jpg" width = "800" height = "600"/> 
    <div class="text">Caption Four</div> 
    </div> 

    <div class="mySlides fade"> 
    <div class="numbertext">5/8</div> 
    <img src="http://i.imgur.com/N2hgBtH.jpg" width = "800" height = "600"/> 
    <div class="text">Caption Five</div> 
    </div> 

    <div class="mySlides fade"> 
    <div class="numbertext">6/8</div> 
    <img src="http://i.imgur.com/McQHME4.jpg" width = "800" height = "600"/> 
    <div class="text">Caption Six</div> 
    </div> 

    <div class="mySlides fade"> 
    <div class="numbertext">7/8</div> 
    <img src="http://i.imgur.com/rOvbBlj.jpg" width = "800" height = "600"/> 
    <div class="text">Caption Seven</div> 
    </div> 

    <div class="mySlides fade"> 
    <div class="numbertext">8/8</div> 
    <img src="http://i.imgur.com/aX4kzGr.jpg" width = "800" height = "600"/> 
    <div class="text">Caption Eight</div> 
    </div> 

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

<div style="text-align:center"> 
    <span class="dot active" 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> 
</div> 

はスクリプトです：私は間違っ

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"; /*Error appears here */ 
    dots[slideIndex-1].className += " active"; 
} 

何をしましたか？

Answer 1

slides[slideIndex-1].style.display = "block"; /*Error appears here */ 

slideIndex - 1がslidesの境界を超えている場合slides[slideIndex-1]は未定義られる理由はあります。最も考えられる原因は、slidesがが空の場合です。です。これは、後からではなくページコンテンツの前にスクリプトを実行している場合に発生します。スクリプトタグを移動

var slides = document.getElementsByClassName("mySlides"); 

後のスライド内容が問題を解決する、または移動する必要があります：はクラス名mySlidesを持つ要素がまだ存在していないので、これは、この行はslides長さをゼロにするために引き起こしますonloadハンドラでshowSlides(slideIndex)コールを呼び出します。