リスト[nextlight]はこのコードで何をしますか？

-2

私はこのコードを2,3週間作業していました。私は先生に助けを求めました。彼はこの行を追加しました。firstlight.src = list[nextlight];はそれをすべて動作させました。彼はそれを私に説明しましたが、私はちょうどそのポイントを得て、それがどのように働いたのか分かりませんでした。誰かがなぜ私たちが[nextlight]をリストするためにソースイメージと等しいのかを私に説明することはできますか？リスト[nextlight]はこのコードで何をしますか？

私のコード：

<!DOCTYPE html> 
<html> 
<body> 

    <h1>JavaScript Code</h1> 
    <p>Traffic Light</p> 

<img id="traffic" src="only red1.jpg"> 
    <button type="button" onclick="ChangeLight()">Change Light</button> 



    <script> 
    var list = ["only red1.jpg","red-yellow 2.jpg", "green3.jpg","yellowonly4.jpg"]; 
    var nextlight = 0; 
    function ChangeLight() { 
     nextlight = nextlight + 1;  
     if (nextlight == list.length) 
     nextlight = 0;  
     var firstlight = document.getElementById('traffic');  
     firstlight.src = list[nextlight]; 
    } 
    </script> 
</body> 
</html>

出典

2017-03-23 Joseph.JJ

正確にはあなたを混乱させるのは何ですか？ 'nextlight'の価値が分かっていますか？配列にどのようなインデックスを付けるのですか？ – jonrsharpe

このコードを実行すると、ライトの動作によってどのようなことが分かりますか？ライトはどのような順序で入りますか？そして、それは 'list'の項目にどのように関連していますか？あなたがそれらのことを考えるなら、あなたは何が起こっているのかを理解することができます。 –

ライン

firstlight.src = list[nextlight];

は、リスト内の次の画像への画像要素のsrc属性を設定します。あなたのWebページ自体と同じ作業ディレクトリにlist[]配列に含まれている正確に何という名前のイメージがあるので、これは動作します

<img id="traffic" src="only red1.jpg"/> <!-- after the first click --> 
<img id="traffic" src="red-yellow 2.jpg" /> <!-- after the second click --> 
<!-- and so on.. -->

を効果的に等価です。 nextlightは数たりlistにおけるトラフィックの光の次の画像の位置です：

list[0] == "only red1.jpg", list[1] == "red-yellow 2.jpg", // and so on because.. 
nextlight == 0,    nextlight == 1

は、この情報がお役に立てば幸い！

出典

2017-03-23 23:52:49

すばらしい説明、ありがとう。 –

0に等しいnextLightと呼ばれるグローバル変数があります。ボタンをクリックすると、この数値がインクリメントされ、は1になります。

次に、新しい番号がリストの長さと等しいかどうかを確認します。が等しい場合は、最初の画像をに選択する必要があります。

なぜですか？ JavaSciptの配列は0ベースのインデックスを持ちます。つまり、4要素の配列の長さは4ですが、最後のインデックスは3で0,1,2,3で始まるためです。

それから、クリックごとに変化しますそれぞれのURLがlist[0],list[1],list[2],list[3]である画像のsrc（firstlight.src = list[nextlight]）であり、インデックス4に達すると再びlist[0]にリセットされます。

出典

2017-03-23 23:41:42

リスト[nextlight]は配列のループのように機能しますか？ –

@ Joseph.JJそれはループの現在の位置として機能します –

リスト[nextlight]はこのコードで何をしますか？

答えて

関連する問題