How to increment jQuery variable?

Question

I'm trying to browse through a picture gallery with jquery, so I have a button which is supposed to increment a variable by 1 and then use that to load the next picture.

Using the top answer on this SO question, I thought this would be the solution:

<div id="pic"></div>
<div id="browse-right">NEXT</div>

<%= image_tag("/1.JPG", id:"1") %>
<%= image_tag("/2.JPG", id:"2") %>
<%= image_tag("/3.JPG", id:"3") %>

$("#1").click(function() {
  var x = 1;
  $("#pic").html('<img src="/' + x + '.JPG" />');
});
$("#2").click(function() {
  var x = 2;
  $("#pic").html('<img src="/' + x + '.JPG" />');
});
$("#3").click(function() {
  var x = 3;
  $("#pic").html('<img src="/' + x + '.JPG" />');
});
//...
$("#browse-right").click(function() {
  x = x + 1;
  $("#pic").html('<img src="/' + x + '.JPG" />');
});

But it just reloads the same picture, which means var x doesn't change. Anyone know the proper syntax?

UPDATE: Okay, I think I've figured out the problem. x is set when a picture is clicked on, and apparently it isn't persisting after the function is complete. I didn't include that part in the original code because I thought it would make the whole thing more complicated to read.....lesson learned. How can I get x to persist after the function it is set in?

Youve edited your code a bunch. Please update what the problem is when your done. If you step through the javascript and watch variable x, does it not increase? Does it get stuck at 1 or 2? — Daniel Hoffmann-Mitscherling
– Daniel Hoffmann-Mitscherling, Commented Jul 3, 2015 at 23:37
Can you also provide the context (aka rest of the code) around this individual piece of code? — Kevin Ji
– Kevin Ji, Commented Jul 3, 2015 at 23:38

guest271314 · Accepted Answer · 2015-07-04 00:31:39Z

2

How can I get x to persist after the function it is set in?

Try defining x outside of and before click handler

var x = 1;
$("body").on("click", function() {
  x = x + 1;
  $(this).html(x)
})

body {
  width: 300px;
  height: 300px;
  border: 1px solid purple;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
click

answered Jul 4, 2015 at 0:31

guest271314

1

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

7 Comments

Joe Morano Over a year ago

Wait a second, now x is always 1. How can I set it with a click?

guest271314 Over a year ago

"now x is always 1" Can create stacksnippets , jsfiddle jsfiddle.net to demonstrate ?

Joe Morano Over a year ago

I'm not sure how to create a jsfiddle to demonstrate that. But if I set x = 5, by say clicking on picture #5, and then click on #browse-right, x is set to 2, not 6.

guest271314 Over a year ago

@JoeMorano "not sure how to create a jsfiddle to demonstrate that" Include html at upper-left textarea , js at lower-left textarea , css at upper-right textarea ; select jQuery at "Framesworks & Extensions" , click "Run"

SpYk3HH Over a year ago

@JoeMorano You should really read up on scope

|

filype · Accepted Answer · 2015-07-03 23:42:01Z

0

Your code looks ok. and here's a working version https://jsfiddle.net/a50nz178/1/

A couple of things you could check:

check that the image is actually there /1.JPGas well
check that images are not all named as jpg all lower case?

answered Jul 3, 2015 at 23:42

filype

8,47010 gold badges46 silver badges70 bronze badges

Comments

SpYk3HH · Accepted Answer · 2015-07-04 01:32:39Z

If I had to guess, looking at your previous _{You've updated. Turns out I was right. Your x was out of scope.} correct code, I'd bet your problem is scope. _{Scope Tutorial}

I'm willing to bet, somewhere else in your code your using something like for(x in ; ... Which is reassigning x. If that's not the case, I'd still bet on either scope, or the image is src isn't correct. You should use your developer console to check if a bad image source is being pulled. Your using / at the begining of your img src which will go back to base path. If you images are in an images folder you need to include the proper directory path.

You could easily shorten the scope of this by attaching your increment variable to your element object like so:

$("#browse-right").click(function(e) {
    //  the following is a simple inline `if` statement
    //  what it says is (this is your element)
    //  if this.i does not exist, create it equal to one, 
    //  else count it up once
    !this['i'] ? this.i=1: this.i++;
    $("#pic").html('<img src="/' + this.i + '.JPG" />');
    //  the following simply shows what `i` currently is
    $('h3').text(this.i);
});

p { cursor: pointer; background: #aabb00; padding: 1em .5em; text-align: center; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p id="browse-right">Browse Right</p>
<h3></h3>
<div id="pic">
  IMG HERE
</div>

Collectives™ on Stack Overflow

How to increment jQuery variable?

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related