Array of objects - Loop through on Click

Array or objects - 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 colorArray = [
    {
        text: 'white',
        hex : '#fff'
    },
    {
        text: 'red',
        hex : '#F00'
    }
];

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

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

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