Цикл через массив по щелчку

Question

Мне интересно, как циклически перемещаться по значениям в массиве при нажатии? Когда отображается последнее значение массива, следующий клик должен снова отобразить первое значение массива.

Я думаю, что я близок, однако, когда я добираюсь до последнего значения массива, я должен щелкнуть дважды, прежде чем снова отобразит первое значение.

Вот мой JavaScript:

var myArray = ["red", "yellow", "green"]; 
var myIndex = 1; 
var print = document.getElementById('print'); 

print.innerHTML = myArray[0]; //Print first value of array right away. 

function nextElement() { 
    if (myIndex < myArray.length) { 
    print.innerHTML = myArray[myIndex]; 
    myIndex++; 
    } 
    else { 
    myIndex = 0; 
    } 
}; 

Вот мой HTML:

<p>The color is <span id="print"></span>.</p> 

<a id="click" href="#" onclick="nextElement();">Click</a> 

Вот скрипку, если это полезно:

http://jsfiddle.net/jBJ3B/

Answer 1

Вы могли бы использовать по модулю оператора следующим образом:

function nextElement() { 
    print.innerHTML = myArray[myIndex]; 
    myIndex = (myIndex+1)%(myArray.length); 
    } 
}; 

См: http://jsfiddle.net/jBJ3B/3/

Еще более крайность (как zdyn написал):

function nextElement() { 
    print.innerHTML = myArray[myIndex++%myArray.length]; 
}; 

См: http://jsfiddle.net/jBJ3B/5/

Answer 2

В краткой, как я мог бы получить:

function nextElement() { 
    print.innerHTML = myArray[myIndex++ % myArray.length] 
} 

Answer 3

var print = document.getElementById ('print');

Почему вы назначаете переменную этому? почему бы не просто написать

document.getElementById ('печати') innerHTML = туАггау [0]. // Печатать первое значение массива сразу. document.getElementById ('print'). Style.color = myArray [0]; // Установите цвет печати идентификатора.