I am wondering how to cycle through the values in an array on click? When the last value of the array is displayed, then the next click should display the first value of the array again.

I think that I am close, however when I get to the last value of the array I have to click twice before it displays the first value again.

Here is my 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;   
  }
};

Here is my HTML:

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

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

Here's a fiddle if that is helpful:

/

I am wondering how to cycle through the values in an array on click? When the last value of the array is displayed, then the next click should display the first value of the array again.

I think that I am close, however when I get to the last value of the array I have to click twice before it displays the first value again.

Here is my 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;   
  }
};

Here is my HTML:

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

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

Here's a fiddle if that is helpful:

http://jsfiddle/jBJ3B/

• javascript

3 Answers 3

You could use the modulo operator like this:

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

See: http://jsfiddle/jBJ3B/3/

Even more extreme is (as zdyn has written):

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

See: http://jsfiddle/jBJ3B/5/

As concise as I could get it:

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

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

why do you assign a variable to this? why not just write

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