Prev/Next item in Array

Question

I have a variable with an empty array.

var imageData = [];
var myIndex = 0;

onClick of an element I add items to the array.

["item_1", "item_2", "item_3", "item_4", "item_5"]

This array then gets added to a div that has a background image.

$('.final_div').css('background-image', 'url(https://url/path/images/' + imageData[myIndex] + '.png)');

So i've just added a prev/next button. I added: myIndex = myIndex +1; to the next button and then myIndex = myIndex -1; to the prev button. However, after so many iterations I get back nothing, as in myIndex is undefined anyone know what i'm doing wrong?

I've seen this question a few times but not sure what i've missed. Thanks!

EDIT: Sorry! Here's more full view of the code.

My array: ["item_1", "item_2", "item_3", "item_4", "item_5"]

My next onClick:

   $('.btn-right').on('click', function(){
      myIndex = myIndex + 1;
     $('.final_div').css('background-image', 'url(https://url/path/images/' + imageData[myIndex] + '.png)');
    });

My prev onClick:

   $('.btn-left').on('click', function(){
      myIndex = myIndex - 1;
     $('.final_div').css('background-image', 'url(https://url/path/images/' + imageData[myIndex] + '.png)');
    });

What happens when myIndex is zero (0) and you press prev? There is no index -1. The same for next and myIndex is the length of the array — R. Schifini
– R. Schifini, Commented Dec 15, 2015 at 17:13

casraf · Accepted Answer · 2015-12-15 17:26:03Z

3

A clean solution to always keeping index inside array bounds, is to modulo the size of it. Like so:

myIndex = (myIndex + 1) % imageData.length;

This will cause myIndex to bounce back to 0 once it's reached the imageData.length.

Another approach for the same method would be:

myIndex++;
myIndex %= imageData.length;

edited Dec 15, 2015 at 17:26

answered Dec 15, 2015 at 17:16

casraf

21.8k10 gold badges60 silver badges93 bronze badges

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

Comments

Paul Roub · Accepted Answer · 2015-12-15 17:12:38Z

You're increasing myIndex on every click. It will soon run past the end of imageData (e.g. when myIndex is 4 in your example, incrementing to 5 will be past the end of the array).

Check that, and either go back to the beginning:

$('.btn-right').on('click', function(){
  myIndex++;
  if (myIndex >= imageData.length)
    myIndex = 0;   

  $('.final_div').css('background-image', 'url(https://url/path/images/' + imageData[myIndex] + '.png)');
});

Or just stay at the end of the list:

$('.btn-right').on('click', function(){
  myIndex++;
  if (myIndex >= imageData.length)
    myIndex = imageData.length - 1;   

  $('.final_div').css('background-image', 'url(https://url/path/images/' + imageData[myIndex] + '.png)');
});

The logic for "left" would be similar - either:

if (myIndex < 0)
  myIndex = imageData.length - 1;

or

if (myIndex < 0)
  myIndex = 0;

Collectives™ on Stack Overflow

Prev/Next item in Array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related