Cycle through an array on click

Question

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/

Μenelaοs · Accepted Answer · 2013-06-20 01:21:16Z

12

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/

edited Jun 20, 2013 at 1:21

answered Jun 20, 2013 at 1:15

Μenelaοs

24.4k20 gold badges98 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mdd Over a year ago

Thanks. I guess I was thrown since myArray.length returns a value of 3, but myArray's last position was 2. Thank you!!!

zdyn · Accepted Answer · 2013-06-20 01:19:27Z

2

As concise as I could get it:

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

answered Jun 20, 2013 at 1:19

zdyn

2,1731 gold badge16 silver badges17 bronze badges

Comments

d delep · Accepted Answer · 2017-01-26 03:54:59Z

1

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.

answered Jan 26, 2017 at 3:54

d delep

511 gold badge1 silver badge5 bronze badges

1 Comment

Mdd Over a year ago

Because than I only have to type document.getElementById('print') once. I think that assigning it to a variable also caches the reference to the DOM element so it does not have to be looked up agai.

Collectives™ on Stack Overflow

Cycle through an array on click

3 Answers 3

1 Comment

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Linked

Related