JavaScriptのさまざまなアクションに同じボタンを使用する方法は？

Question

クリックすると特定の画像を表示するボタンが必要です。しかし、もう一度クリックすると、別のイメージを表示する必要があります。表示されている画像は、表示するシーケンスで配列に格納されています。 ボタンをクリックすると1つの画像を次の画像に変更する機能を使用しましたが、3番目の画像に変更しようとすると、二つ目。どうすればいい？

<img id="red" src="traffic-light-red.jpg"> 

<button onclick="myFunction()">Click me</button> 
<p id="change"></p> 
<script> 

var lights= ["traffic-light-red.jpg", "traffic-light-amber.jpg", "traffic-light-green.jpg", "traffic-light-amber.jpg"] 

var image = document.getElementById("red") 

function myFunction() { 
    document.getElementById("change"); 
    image.src = lights[1] 
} 

</script> 

Answer 1

必要な操作を行うには、次のコードを試すことができます。 "counter"という変数を関数の外部に置いてください。

ボタンをクリックすると、[カウンタ]が点灯し、imgのソースとして設定されます。その後、カウンタを1ずつ増やします。

アレイの長さに達すると、カウンタを再び「0」にします。それで最初のイメージから再び始めることができます。

var counter = 0; 
 

 
var lights= ["traffic-light-red.jpg", "traffic-light-amber.jpg", "traffic-light-green.jpg", "traffic-light-amber.jpg"] 
 

 
var image = document.getElementById("red"); 
 

 
function myFunction() 
 
{ 
 
    image.src = lights[counter]; 
 
    console.log(image.src); 
 
    counter += 1; 
 
    
 
    if(counter == lights.length) 
 
    { 
 
     counter = 0; 
 
     } 
 
}

<img id="red" src="traffic-light-red.jpg"> 
 

 
<button onclick="myFunction()">Click me</button> 
 
<p id="change"></p>

Answer 2

このお試しください： これはこれまでのところ、私のコードは、あなたの関数で

<input type="hidden" name="imageindex" id="imageindex" value="0"> 

をクリックして現在の画像を保存し、それぞれのインクリメント値を取得するために 利用隠しフィールドを「MyFunctionを（）」ロジックを作成imageindex値を取得してインクリメントします。 imageindexの値が大きい場合、イメージ配列は0にリセットされます。次のJavascriptコードから参考にしてください。

var currentindex = $("#imageindex").val(); 
var totalimages = lights.length; 

if(currentindex > totalimages) { 
    currentindex = 0; 
} 
image.src = lights[currentindex]; 

//New Index 
var newindex = currentindex + 1; 

//Set new index value 
$("#imageindex").val(newindex); 

Answer 3

それ以上のあなたのコードから、あなたは常にあなたがボタンをクリックしたときに、常に第2の画像をロードします1（image.src = lights[1]）にインデックスを設定しているようです。変数にロードされたイメージの現在のインデックスを割り当て、これをインクリメントする必要があります。

[編集] 下記の私の答えでは、最初の画像で最初に画像をゼロに設定したインデックスに基づいて画像を選択してから、インデックスをインクリメントします。ライト配列の最後の要素と等しい場合は、indexの値をチェックしています。次に、ゼロにリセットして、開始イメージに戻ります。

としては、以下：

var lights= ["traffic-light-red.jpg", "traffic-light-amber.jpg", "traffic-light-green.jpg", "traffic-light-amber.jpg"] 
var index = 0; 
var image = document.getElementById("red") 

function myFunction() { 
    document.getElementById("change"); 

    image.src = lights[index] 
    index++; 
    if(index >= lights.length) { 
     index = 0; 
    } 
} 

も配列と配列のインデックスを認識します。下の配列の長さは5ですが、5番目のアイテムのインデックスは4です。これは、lengthプロパティがアイテムの数を返しますが、javascript（ほとんどのプログラミング言語のように）はゼロから数え始めます。

これは私が上記のif(index >= lights.length)より大きいかどうかをチェックしています。インデックスが4の場合は存在しないarrrayの5番目の要素が検索されます。 （私はおそらくtbh以上のものは必要ないかもしれませんが、それを含めるのが良い方法だと思います）。この

var arr = ["item1","item2","item3","item4","item5"]; 
console.log(arr[0]) // item1 - First element, index 0 
console.log(arr[4] // item5 - Fifth element, index 4 

Answer 4

使用：

<button id="" onclick="lights()">Click me</button> 
<img id="red" src="add file name"> 

<script> 
function lights(){ 
    var sequence=[your files]; 
    var image = document.getElementById('red'); 
    var i = 0; 
    intervalHandler = setInterval(function(){ 
    var colour=sequence[i] 
    image.src = colour; 
    i++; 
    if(i>=sequence.length) { 
     clearInterval(intervalHandler); 
    } 
    },1000) 
    } 
</script>