javascript - ループ関数配列の Javascript

Question

私はJavaScriptの初心者です。ボタンをクリックすると、配列から単一のオブジェクトが順番に呼び出される関数を作成しようとしています。

Answer 1

「ee」と表示するだけです。

もちろん、配列全体をループして、各項目をinnerHTMLその 1 つの要素の に割り当てています。最後の項目だけがそこにとどまり、表示されます。

私がやりたいのは、ボタンをクリックして「aa」を表示し、もう一度押すと「aa」ではなく「bb」などを表示することです。

次に、for ループを使用することはできませんが、カウンターを手動で追跡し、呼び出しごとに 1 つのステップのみを実行する必要がありますcall。

var myArray = ["aa","bb","cc","dd","ee"];
var i=0;
function call() { 
    document.getElementById("placeDiv").innerHTML = myArray[i];
    if (i < myArray.length-1)
        i++;
    else
        i = 0; // restart, but you may as well show an error message
}

Answer 2

これを試してください:-クリックするたびにループし、要素 innerHTML に値を割り当てているため、常に配列の最後の値のみが保持されます。

デモ

var myArray = ["aa","bb","cc","dd","ee"];
var i = 0;
function call(){
     if(myArray.length <= i) i=0;

       document.getElementById("placeDiv").innerHTML = myArray[i++];
}

グローバル変数を使用したくない場合は、この方法も使用できます。

http://jsfiddle.net/zZ4Rm/

配列のメソッドを使用shiftして最初のアイテムを取得し、それを配列の最後に押し戻してサイクルを発生させます。

var myArray = ["aa","bb","cc","dd","ee"];

function call(){
    var val = myArray.shift();
    myArray.push(val);
    document.getElementById("placeDiv").innerHTML = val;
}

Answer 3

<script type="text/javascript">

    var myArray = ["aa","bb","cc","dd","ee"],
        num=0;
    function call() {  
        document.getElementById("placeDiv").innerHTML = myArray[num];
        num++;
    };
</script>

<button onclick="call()">Click!</button>
<div id = "placeDiv"></div>