Javaスクリプトで異常がコード化されていないと、問題が見つかりそうです

基本的に私のコードは動作しますが、最近発見した問題があります。私はそれを実行していたので、写真は間違った順序で来るようです。私はGoogle Chromeでそれを走らせ、inspect要素を使って、それが入った順番を見つけました。image1> image4> image1> image2> image4> image1などですが、始まりの順序は正しくなく、私はできません。問題とそれを実行してGoogleクロムhtmlのコンソールの傾きは問題を見つけるようだ。Javaスクリプトで異常がコード化されていないと、問題が見つかりそうです

<html> 
<body> 

<p>Click the button to change to the next light.</p> 

<img id="starting_light" src="image1.jpg"> 

<button type="button" onclick="nextLightClick()">Next Light</button> 

<script> 

var lights = new Array("image2.jpg","image4.jpg","image1.jpg"); 



var index = 0; 
var lightsLen = lights.length; 

function nextLightClick() { 
    index++; 

    if (index == lightsLen) 
     index = 0; 

    var image = document.getElementById('starting_light'); 
    image.src = lights[index]; 
} 
</script> 

</body> 
</html>

出典

2017-01-23 Anonymous

あなたはなぜこれに編集しましたか？これは何と関係がありますか？ – Jason

それはあなたが最初のイメージではなく[0]の[1]指標であるので、あなたはあなたの関数の残りの部分を実行するする前に、インデックスカウンタが増加している、異常ではありません。

関数の最後に移動すると、期待どおりに機能します。

function nextLightClick() { if (index == lightsLen) index = 0; var image = document.getElementById('starting_light'); image.src = lights[index]; index++; }

https://jsfiddle.net/vju0sy4w/1/

出典

2017-01-23 21:08:15 Jason

まあ配列は、インデックス0から始まり、あなたはすぐにあなたのカウンタをインクリメントしているので、インデックスは1（第2項目）で開始します。代わりにこれを試してみてください：

(function() { 
    var srcIndex = -1, // Start at -1 since you're incrementing right off the bat (first index will be zero) 
     lightsLen = lights.length, 
     image = document.getElementById('starting_light'); 

    // If this needs to be global 
    window.nextLightClick = function() { 
    srcIndex++; 

    if (srcIndex === lightsLen) { 
     srcIndex = 0; 
    } 

    image.src = lights[srcIndex]; 
    }; 
})();

出典

2017-01-23 21:10:13 bosscube

後でインクリメントすると、不必要に広い変数への依存がなくなります。 – Makoto

「より広い」変数？どのように初期化されるかを除いて同じことです。 'index'変数が必要です。これは' srcIndex'という名前に変更されました。文字通り個人的な好み以外の違いはありません。 – bosscube

あなたの変数は本当にそれを気にする関数の外で宣言されました。スコープは個人的な好みであっても重要です。 – Makoto

Javaスクリプトで異常がコード化されていないと、問題が見つかりそうです

答えて

関連する問題