Array - Loop through on Click

Array - Loop through on Click

by sqiudward

HTML

<p>The color is <span id="print"></span>.</p>
<p>Index : <span id="idx"></span></p>
<p>Length : <span id="max"></span></p>
<a id="click" href="#" onclick="nextElement();">Next</a>

<a id="click" href="#" onclick="previousElement();">Previous</a>

JavaScript

//var myArray = ["red", "yellow", "green"];
var myArray = ["1", "2", "3"];
var myIndex = 0;
var print = document.getElementById('print');
var idx = document.getElementById('idx');
var max = document.getElementById('max');

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

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

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