イメージJavaScriptを使用してボタンを変更する

私の答えはhereとhereでしたが、そのような単純なプロセスではコードが長すぎることがわかりました。以下、私のコードは、 'image'を同じファイルにある配列内の異なる.jpgに変更することで、基本的な画像チェンジャーを示しています。理論的にはイメージJavaScriptを使用してボタンを変更する

<!DOCTYPE html> 
<html> 
<body> 
<img id="image" src="blank_light.jpg" style="width:100px"> 
<p></p> 
<button class = "change-image">Change Lights</button> 
<script> 
var imageSources = ["green_light.jpg", "yellow_light.jpg", "red_and_yellow_light.jpg", "red_light.jpg", "blank_light.jpg"] 
var buttons = document.getElementsByClassName("change-image") 
for (let i = 0; i < buttons.length; i++) { 
    buttons[i].onclick = function() { 
    document.getElementById("image").src = imageSources[i] 
    } 
} 
</script> 
</body> 
</html>

、私はHTML内のスクリプトを埋め込んだので、それは夢のように動作するはずですが、イメージは黄色の光に立ち往生しているようです。リピートボタンのクリックフェーズがありますか？

ありがとうございました。

出典

2017-01-26 freddie.bumder

は1つだけのボタンがあり、あなたはそれをクリックしたときには、最初の画像への画像の 'src'を設定配列（ 'green_light.jpg'です）。 – Dekel

複数のボタンがある場合、このコードは意味があります。しかし、クリックごとに配列を調べたいので、少なくとも現在の配列インデックスを格納する変数が必要です。ボタンをクリックすると変数が前進し、それを使って配列からファイル名を取得します。 –

@Dekelは、Chrisが言ったように配列インデックスの変数を作成すること、またはより多くのボタンを作成することをお勧めしますか？もちろん、ボタンを増やすと、見た目が不安定になることがありますが、JSやHTMLの基本的な知識で、誰かが回答として投稿しない限り、私はおそらくインデックスを作るのに苦労します_ *ヒントヒント* _ –

ループを使用する必要はありません。 document.getElementsByClassName("change-image")[0];を使用してボタンへの参照を取得できます。次に、ボタンをクリックするたびにトリガーするイベントリスターを追加できます。

ユーザーがクリックするたびに、アレイを1つずつ繰り返します。

あなたはこのような何かをやって見て可能性：ここで

var buttons = document.getElementsByClassName("change-image")[0]; 
var index = 0; 

buttons.addEventListener('click',function() { 
    if(index === imageSources.length) { 
     index = 0; 
    } 
    document.getElementById("image").src = imageSources[index]; 
    index++; 
});

は完全なコード、機能しています。 img要素を調べると、それが更新されることがわかります。

<!DOCTYPE html> 
<html> 
    <body> 
    <img id="image" src="blank_light.jpg" style="width:100px"> 
    <p></p> 
    <button class="change-image">Change Lights</button> 
    <script> 
     var imageSources = ["green_light.jpg", "yellow_light.jpg", "red_and_yellow_light.jpg", "red_light.jpg", "blank_light.jpg"] 
     var buttons = document.getElementsByClassName("change-image")[0]; 
     var index = 0; 

     buttons.addEventListener('click', function() { 
     if (index === imageSources.length) { 
      index = 0; 
     } 
     document.getElementById("image").src = imageSources[index]; 
     index++; 
     }); 

    </script> 
    </body> 
</html>

出典

2017-01-26 13:37:21

私はあなたのコードを使ってみましたが、ボタンをクリックすると画像がまったく変更されませんでした@Chris Gのアプローチを試した後 –

@ freddie.bumderコードは間違いなく動作します。イメージを正しく参照していますか？ –

あなたは魔術師ポールです、どうもありがとうございます。 –

おかしい実装 - ））

document.getElementById("changer").addEventListener("click", function(){ 
 
    var i = document.getElementById("source"); 
 
    var images = [ 
 
    "http://lorempixel.com/400/200/sports", 
 
    "http://lorempixel.com/400/200/animals", 
 
    "http://lorempixel.com/400/200/nature" 
 
    ]; 
 
    
 
    var ord = parseInt(i.dataset.order); 
 
    
 
    nextImage = function(prev) { 
 
    return (prev+1 >= images.length ? (prev + 1)%images.length : prev+1); 
 
    } 
 
    
 
    document.getElementById("source").src = images[nextImage(ord)]; 
 
    i.dataset.order = ord + 1; 
 
    
 
})

<img id="source" data-order="0" src="http://lorempixel.com/400/200/sports"> 
 
<button id="changer">change</button>

出典

2017-01-26 14:02:44 marmeladze

イメージJavaScriptを使用してボタンを変更する

答えて

関連する問題