CODEWITHSUNDEEP
javascript
Mdd
Mdd

Reputation: 4400

Cycle through an array on click

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.net/jBJ3B/

Upvotes: 4

Views: 8854

Answers (3)

d delep
d delep

Reputation: 51

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.

Upvotes: 1

Menelaos
Menelaos

Reputation: 25725

You could use the modulo operator like this:

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

See: http://jsfiddle.net/jBJ3B/3/

Even more extreme is (as zdyn has written):

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

See: http://jsfiddle.net/jBJ3B/5/

Upvotes: 12

zdyn
zdyn

Reputation: 2173

As concise as I could get it:

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

Upvotes: 2

Related Questions