javascript if else statement

Question

i'm trying to make images on my site a bigger size if you click on them.
i want to undo the enlarged view if you click on the picture again.

$("img").click(function(){

    var grown = 'false';

    if (grown == 'true') {
        $(this).animate({width: 300, height: 200}, 1000 );
        var grown = 'false';
        console.log(grown);
    }

    else if (grown == 'false') {
        $(this).animate({width: 600, height: 400}, 1000 );
        var grown = 'true';
        console.log(grown);
    }

});

enlarging works, but the grown variable seems to always be stuck on true, so it won't ever shrink back. is my logic flawed? any help greatly appreciated!

A few people seem to be missing the point of your request. Moving the 'var grown = false' declaration outside the click function won't work for all images on the page - resizing one will set 'grown' to true, then clicking another, non-resized one will see that 'grown' is true and do nothing. See Šime Vidas's answer below for a solution that respects multiple images. — Town
– Town, Commented Mar 14, 2011 at 16:59

Šime Vidas · Accepted Answer · 2011-03-14 17:37:36Z

6

Why your code doesn't work:

At the beginning of the click handler, your declare the grown variable and assign its value to 'false'. Therefore, the else branch of the if statement will be executed. This will happen every time the user clicks on an image. The if branch will never be executed.

This does the trick:

$('img').click(function() {
    var props = $(this).hasClass('large') ?
                {width: 300, height: 200} : 
                {width: 600, height: 400};    

    $(this).animate(props, 1000).toggleClass('large');
});

Live demo: http://jsfiddle.net/simevidas/waCQQ/1/

edited Mar 14, 2011 at 17:37

answered Mar 14, 2011 at 16:51

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

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

2 Comments

Town Over a year ago

+1 for providing the underlying solution rather than just an answer.

Mark Schultheiss Over a year ago

@josh But he scares me when closer... :)

NakedBrunch · Accepted Answer · 2011-03-14 16:48:49Z

2

Move the initial var grown= 'false' outside the if/else statement and remove the "var" key word from inside the if/else statement

answered Mar 14, 2011 at 16:48

NakedBrunch

49.5k14 gold badges75 silver badges98 bronze badges

2 Comments

NakedBrunch Over a year ago

Yeah, I caught that too pretty quick.

Šime Vidas Over a year ago

That will not work. The grown variable will be 'false' on every click.

Guffa · Accepted Answer · 2011-03-14 17:17:22Z

You need to use a variable which has a scope that is larger than the event handler so that it retains it's value, but you also need a separate variable for each image. Use each to loop through the images, so that you can declare a variable that gets a separate scope for each image.

Only use var where you declare the variable, if you use it where you change it you will declare another local variable instead and only change that.

Javascript has a boolean type, so you should use values true and false instead of strings "true" and "false", that makes for nicer code.

$("img").each(function(){

  var grown = false;

  $(this).click(function() {
    if (grown) {
      $(this).animate({width: 300, height: 200}, 1000 );
    } else {
      $(this).animate({width: 600, height: 400}, 1000 );
    }
    grown = !grown;
  });

});

Phil · Accepted Answer · 2011-03-14 16:49:58Z

1

Try declaring the var grown variable outside the $("img").click(function()

answered Mar 14, 2011 at 16:49

Phil

11.2k18 gold badges73 silver badges106 bronze badges

1 Comment

Šime Vidas Over a year ago

That would work only for one image. If there are multiple images on the page, you would need a variable for each image.

krtek · Accepted Answer · 2011-03-14 16:50:34Z

1

You redeclare your variable each time.

The var keyword is used to declare a variable in the current scope. So you're declaring a new variable in each of your if statement which mask the one from the scope below.

Try remove the var keyword in your both if statement, it should work.

answered Mar 14, 2011 at 16:50

krtek

26.7k5 gold badges60 silver badges84 bronze badges

Comments

Lightness Races in Orbit · Accepted Answer · 2011-03-14 17:50:55Z

1

The grown variable is local to the function invocation. You'll have to take it outside, into the enclosing scope for it to retain its value between calls.

BTW using the var keyword inside the conditional blocks is redundant and slightly misleading!

edited Mar 14, 2011 at 17:50

answered Mar 14, 2011 at 16:51

Lightness Races in Orbit

387k77 gold badges670 silver badges1.1k bronze badges

2 Comments

Šime Vidas Over a year ago

That's not true. There is no block scope in JavaScript. All variable declarations hoist to the top of the function. If you declare the same variable multiple times, there will still be only one variable.

Lightness Races in Orbit Over a year ago

Mm yes, so it seems. There is still the issue of the function scope, though.

Collectives™ on Stack Overflow

javascript if else statement

6 Answers 6

2 Comments

2 Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related