Cycle through an array Javascript

Question

My array var myImages = []; that once i've console.log() the array (I push items in into it above) I get this back:

["01_img"]
["02_img"]
["03_img"]
["04_img"]
["05_img"]

Then onClick I change the background of a div to have a background image from the array.

$('.div_content').css('background-image', 'url(https://url/path/images/' + myImages + '.png)');

How do I change make it, so the background image I have changes onClick.

I tried as per example I found, but to no prevail:

    $('.btn').on('click', function(){
      var myIndex = 1;
          myIndex = (myIndex+1)%(myImages.length);

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

Any help is appreciated, thanks.

Sorry my bad. Basically, each item in the array is an image name. So `onClick` I change the background image of a `div` with the item in the array. Issue i'm having is it always loads in the first array item. I need to `onClick` randomly choose an item from the array — pourmesomecode, Dec 07 '15 at 12:15

suvroc · Accepted Answer · 2015-12-07T12:20:23.370

2

If I understand your problem corectly you should only define your myIndex variable globally or in outer scope

var myIndex = 0;
$('.btn').on('click', function(){
    $('.div_content').css('background-image', 'url(https://url/path/images/' + myImages[myIndex] + '.png)');
    myIndex = (myIndex+1)%(myImages.length);
});

edited Dec 07 '15 at 12:20

answered Dec 07 '15 at 12:14

suvroc

3,058
1
15
29

...but not a *global*, just something that the click handler closes over. Global vars are to be avoided. – T.J. Crowder Dec 07 '15 at 12:15
Thanks, I just edited – suvroc Dec 07 '15 at 12:20

joyBlanks · Answer 2 · 2015-12-07T12:17:59.607

2

Each time you click the myIndex var is set to 1. Remove the line var myIndex = 1; and make myIndex as a global var.

Also you need to use myImages[myIndex] instead of myIndex which will fetch that value from myIndex as key from myImages

var myIndex = 0;

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

edited Dec 07 '15 at 12:17

answered Dec 07 '15 at 12:15

joyBlanks

6,419
1
22
47

Also need to start a `0`, and increment *after* using the value. – T.J. Crowder Dec 07 '15 at 12:17

somethinghere · Answer 3 · 2015-12-07T12:19:09.047

1

var myIndex = 0;
$('.btn').on('click', function(){
      // Short hand if: If the statement is true, use the first value, else (':') the second.
      myIndex = (myIndex+1)%(myImages.length);
      $('.div_content').css('background-image', 'url(https://url/path/images/' + myImages[myIndex] + '.png)');)
});

You should do this by declaring a global variable that stores you location in the array: myIndex, then incrementing that number and making sure it does not exceed the arrays length (minus 1, as array length starts at 0).

If you want a random pick from the array, try the following:

myIndex = Math.floor(Math.random() * myImages.length);

Then you can simple request the value at that location using myImages[myIndex].

edited Dec 07 '15 at 12:19

answered Dec 07 '15 at 12:15

somethinghere

16,311
2
28
42

@T.J.Crowder Ah yes I have never done it that way. Let me reinstate that. – somethinghere Dec 07 '15 at 12:17
It's really cool. :-) Say `length` is `5`. If you start with `i = 0`, then `i = (i + 1) % length`, `i` will go 0, 1, 2, 3, 4, 0, 1, 2, 3, 4... – T.J. Crowder Dec 07 '15 at 12:18
@T.J.Crowder Cool - if a bit hard to read (but that could be because I haven't a use for it yet.. Although this is probably good gallery material). Cheers – somethinghere Dec 07 '15 at 12:20

Cycle through an array Javascript

3 Answers3