Array - Loop through on Click

Array - Loop through on Click

by Nirvanachain

HTML

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

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

CSS

span#print{
    background-color:#a9e2f9;
    padding:5px;
}

JavaScript

var myArray = ["grey", "yellow", "green", "blue", "purple", "orange", "#f0f", "sherpa"];
var myIndex = 1;
var print = document.getElementById('print');

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

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