3

I am trying to get into JQuery but am struggling a bit around.

What I'm trying to do is go through an array one click at a time so that each time I click on the "next" button a new item is presented.

Let's take a look at the following code: 

$(document).ready(function(){
    var stuff =["house","garden","sea","cat"];  
    for (var i=0; i<stuff.length;i++)
    {
        console.log(stuff[i]);
    }  
});

Now how I was thinking something like creating a while loop with i 

$("#next").on('click', function(){i++;});

But this somehow doesn't work. Anyone able to explain to me how to do this in a relatively simple way?

Improve this question
1
  • 1
    A loop does not respond to user interaction. It always runs completely. Commented May 14, 2013 at 17:25

5 Answers 5

Reset to default
6

When you run through your loop with the for statement, it does so immediately and not in response to an event.

Instead, you want to step through the array with each click. To do so, you need to define a counter outside your click function and increment (or reset, if you've reached the end of the array) with each click.

Here is some sample code:

$(function () { // this is a shortcut for document ready
    var stuff = ['house', 'garden', 'sea', 'cat'],
        counter = 0;

    console.log(stuff[counter]); // your initial value

    // the next line, of course, assumes you have an element with id="next"
    $('#next').click(function () {
        counter = (counter + 1) % stuff.length; // increment your counter
        // the modulus (%) operator resets the counter to 0
        // when it reaches the length of the array

        console.log(stuff[counter]); // the new incremented value
    });
});

I hope this helps!

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

Comments

5

Simply keep a counter outside your callback and increment it at each click :

$(document).ready(function(){
    var i = 0;    
    var stuff =["house","garden","sea","cat"]; 
    $("#next").on('click' function(){
         i = (i+1)%stuff.length;
         console.log(stuff[i]);
    });
});
Improve this answer

2 Comments

Short followup: What is the intention behind adding the "%stuff.length;"?
@Peter: % is the modules operator. i will be reset to 0 if it is equal to stuff.length ( 4 % 4 = 0). This is often use to "wrap around" when iterating over an array, otherwise you would continue increasing i and no such elements exist in the array.
1 
$(document).ready(function(){
   var currentPos = 0;

   $("#next").click(function()
   {
      currentPos++;
      printThings(currentPos);
   });
});

function printThings(maxLength)
{
   maxLength = maxLength > stuff.length ? stuff.length : maxLength;
   var stuff =["house","garden","sea","cat"];  
    for (var i=0; i<maxLength;i++)
    {
        console.log(stuff[i]);
    }  
}
Improve this answer

Comments

0

I wanted to cycle in the opposite direction:

$("#prev").on('click', function(){
        stuff.reverse();
         i = (i+1)%stuff.length;
         console.log(stuff[i]);
    });

It works but it skips one value...

Improve this answer

Comments

-1

I would add a text box to the form. Then, on your #next click function loop the array. While looping compare the array value to what is in the text box. When you get a match - change the value of the text box to the next array value in the loop, then exit the loop.

Improve this answer

1 Comment

That sounds complicated and why would you use a textbox if you can just store the value in a variable? The OP does not even mention that they are using a form.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.