コンソールでJavascriptスライダーエラーが発生し、スライドしない

ページは正常に動作しますが、スライダーは次の画像にスライドしません。 JSFiddleは問題なく動作し、画像はスライドしますが、localhostやライブウェブサイトでは失敗します。機能のslides[currentSlide].className = 'klant';一部に：「未定義の『className』のプロパティを設定できませんキャッチされない例外TypeError」間違った何が起こっているのかを把握することはできませんコンソールでJavascriptスライダーエラーが発生し、スライドしない

<script> 

    var slides = document.querySelectorAll('#slides.klant'); 
var currentSlide = 0; 
var slideInterval = setInterval(nextSlide,2000); 

function nextSlide(){ 
    slides[currentSlide].className = 'klant'; 
    currentSlide = (currentSlide+1)%slides.length; 
    slides[currentSlide].className = 'klant showing'; 
} 


</script> 

<title>Untitled Document</title> 
</head> 

<body> 

<div id="ads"> 
<ul id="slides"> 
    <li class="klant showing"><img src="img/first.jpg"></li> 
    <li class="klant"><img src="img/second.jpg"></li> 
    <li class="klant"><img src="img/third.jpg"></li> 
    <li class="klant"><img src="img/fourth.jpg"></li> 
    <li class="klant"><img src="img/fifth.jpg"></li> 
</ul> 
</div>

私はエラーを取得します。

出典

2016-09-26 ThisIsNotArmand

タイミングでのケアを見てください。 'head'のスクリプトは' body'が存在する前に実行されます。 – Teemu

ページがロードされる前にスクリプトが実行されるため、querySelectorAllは空の配列を返します。スクリプトを<body>の最後にコピーしても問題ありません。

JsFiddleでは、デフォルトでスクリプトが読み込まれた後に実行されるため、JsFiddleで動作します。

出典

2016-09-26 12:35:41

Just Replace 
line var slides = document.querySelectorAll('#slides.klant'); 

with 

    var sliderparent = document.getElementById('slides'); 
var slides = sliderparent.querySelectorAll('.klant');

出典

2016-09-26 12:40:26

はい、右はページの下部に全体のスクリプトタグを置き換える必要があります、@テムムありがとう –

コンソールでJavascriptスライダーエラーが発生し、スライドしない

関連する問題