環境/セットアップ - JavaScriptスライダ - 「未定義の 'className'プロパティを設定できません」

Sitepoint tutorialの助けを借りて、小さくてシンプルなスライダを作成することにしました。環境/セットアップ - JavaScriptスライダ - 「未定義の 'className'プロパティを設定できません」

TypeError: Cannot set property 'className' of undefined at nextSlide

私は（ここにリンクhttps://jsfiddle.net/9ndfhn4e/がある）jsfiddleですべてを設定するとき、すべてがうまく動作します：コードは、そのチュートリアルで働くよう

残念ながら、それは私が言ってエラーを返しません。

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Gulp Starter Environment</title> 
    <link rel="stylesheet" href="css/main.css"/> 
    <script src="js/j.js"></script> 
</head> 
<body> 
    <ul id="slides"> 
     <li class="slide showing">Slide 1</li> 
     <li class="slide">Slide 2</li> 
     <li class="slide">Slide 3</li> 
     <li class="slide">Slide 4</li> 
     <li class="slide">Slide 5</li> 
    </ul> 
</body> 
</html>

CSS

* { 
    box-sizing: border-box; } 

html, body { 
    width: 100%; 
    height: 100%; } 

.main { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; } 

#slides { 
    position: relative; 
    height: 300px; 
    padding: 0px; 
    margin: 0px; 
    list-style-type: none; } 

.slide { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    z-index: 1; 
    transition: opacity 1s; } 

.showing { 
    opacity: 1; 
    z-index: 2; } 

.slide { 
    font-size: 40px; 
    padding: 40px; 
    box-sizing: border-box; 
    background: #333; 
    color: #fff; } 

.slide:nth-of-type(1) { 
    background: red; } 

.slide:nth-of-type(2) { 
    background: orange; } 

.slide:nth-of-type(3) { 
    background: green; } 

.slide:nth-of-type(4) { 
    background: blue; } 

.slide:nth-of-type(5) { 
    background: purple; }

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

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

私はそれが環境問題になるかもしれません信じて、私は何も考えることはできません。多分誰かが考えを持っているかもしれない。ありがとうございます。

出典

2017-07-21 nerwusik

はい、助けて、ページの下部にスクリプトを移動しました。どうもありがとうございます！ – nerwusik

フィーリングを作成する場合、javscriptロードタイプのデフォルト設定はonLoadです。これはそうのような文書の先頭にスクリプトを配置します

<head> 
... 
    <script> 
     window.onload=function(){ 
      ...your code... 
     } 
    </script> 
... 
</head>

私はあなたがJSFiddle javascriptのエディタに入力したとして、文書のbodyにコードを配置し、あなたが行っていると仮定しています何。

問題は、DOMがまだロードされておらず、document.querySelectorAll("#slides .slide")が存在しないため見つかりませんでした。

onLoadイベントにコードを添付するか、スクリプトが実行される前にDOMがロードされていることを確認するためにコードをドキュメントの下部に配置する必要があります。

出典

2017-07-21 12:26:21 Kramb

ブリリアント。ご協力ありがとうございます。今分かります。それを底に置いた。 – nerwusik

環境/セットアップ - JavaScriptスライダ - 「未定義の 'className'プロパティを設定できません」

答えて

関連する問題