このコードに3枚の写真を追加することは可能ですか？私は写真3枚を取得し、写真を新たに私は私のファイル .Every少しから写真を使用することができるようにそれを作るために必要なサイクルにあるボタンを行う必要があり、このタスクのための

-2

ができます：Dこのコードに3枚の写真を追加することは可能ですか？私は写真3枚を取得し、写真を新たに私は私のファイル .Every少しから写真を使用することができるようにそれを作るために必要なサイクルにあるボタンを行う必要があり、このタスクのための

<!DOCTYPE html> 
<html> 
<body> 

<img id="light" src="Red.png"> 

<script> 
var list= ['Green.png', 'Yellow.png', 'Red.png']; 
var i = 0; 
function lightsCycle() { 
    i = i + 1; 
    i = i % list.length; 
    var light = document.getElementById("light").src = list[i]; 
} 
</script> 

<button type = "button" onclick="lightsCycle()">Next Light</button> 
</body> 
</html>

UPDATE：私はここに与えられた答えの1を試みるように私のコードを変更したが、私はまだ問題を抱えています：

 <!DOCTYPE html> 
 
    <html> 
 
    <body> 
 
    
 
    <img id="light" src="Red.png"> 
 
    
 
    <script> 
 
    var list= ['https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/daemons.png', 
 
    'https://img.clipartfox.com/837fed127e3383c2a61cf08f76a65081_pics-for-stop-light-yellow-clipart-traffic-light-yellow_641-880.png', 
 
    'http://previews.123rf.com/images/blojfo/blojfo1003/blojfo100300021/6559248-Traffic-light-with-red-light-Stock-Photo.jpg']; 
 
    var i = 0; 
 
    function lightsCycle() { 
 
     
 
     i = (i < list.length - 1) ? ++i : 0; 
 
     
 
     document.getElementById("light").src = list[i]; 
 
    } 
 
    
 
    </script> 
 
    
 
    <img id="light" src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/daemons.png"> 
 
    <button type = "button" onclick="lightsCycle()">Next Light</button> 
 
    
 
    </body> 
 
    </html>

出典

2017-02-22 DMC

ものに写真3枚を追加しますか？ –

404エラーが発生していますか？ – JoeriShoeby

エラーはありませんコードを完全に完成させていません。ランク付けシステムで3つの写真を追加するだけです。緑色が最高です。黄色が最高です。赤色が最悪です。 – DMC

あなたの関数では、iをインクリメントしていて、iをモジュロと配列の長さに設定している次の行にその値をすぐにスローします。その行は必要ありません。

iがアレイがサポートする最も高いインデックス番号にあるかどうかを確認する必要があります。その場合は、0にリセットしてください。

次に、ライン：あなたはどこにでもそれを使用することはありませんので、

var light = document.getElementById("light").src = list[i];

は不必要lightという変数を宣言します。

最後に、HTMLは、彼らのようにイベントハンドラ（onclickの、onmouseover属性など）をフックする属性を使用しないでください。

はスパゲッティコードを作成（HTMLとJavaScriptが同じ行に混在）読みにくいです維持する。 thisバインディングを変更する属性値の周囲にグローバルスコープのラッパー関数を作成し、関数が正しく機能しなくなる可能性があります。は表示されませんW3C standards for event handling

// Put the correct relative paths to your images back into the array. Here, I'm substituting 
 
// online images so that you can see the code working properly. 
 
var list= ['https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/daemons.png', 
 
'https://img.clipartfox.com/837fed127e3383c2a61cf08f76a65081_pics-for-stop-light-yellow-clipart-traffic-light-yellow_641-880.png', 
 
'http://previews.123rf.com/images/blojfo/blojfo1003/blojfo100300021/6559248-Traffic-light-with-red-light-Stock-Photo.jpg']; 
 

 
var i = 0; 
 

 
// Only scan the document one time to get a reference to the image element. 
 
// It's a waste of resources to do it every time the button is clicked 
 
var img = document.getElementById("light"); 
 
var btn = document.getElementById("btn") 
 

 
// Don't use HTML attributes to hook up event handlers (onclick, onmouseover, etc.) 
 
btn.addEventListener("click", lightsCycle); 
 

 
function lightsCycle() { 
 
    // If i is less than the max index, increment it, otherwise set it to zero 
 
    i = (i < list.length - 1) ? ++i : 0; 
 
    // Set the source of the image element to the next array value 
 
    img.src = list[i]; 
 
}

img { width:50px; }

<img id="light" src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/daemons.png"> 
 
<button type="button" id="btn">Next Light</button>

出典

2017-02-22 20:14:01

あなたはそのWebアドレスを入力したときにそれがドキュメントから行うことができます参照してください？ – DMC

@DMCはい、この環境で見ることができるイメージを参照する必要があります。ここからあなたの画像にアクセスすることはできません。配列内の文字列を画像ファイルへの相対パスで置き換えてください。 –

私があなたのコードに私が与えたものを実装しようとすると、私は新しい1のホームページに連れて行くのですか？ – DMC

答えて

関連する問題