CODEWITHSUNDEEP
javascriptjquery
thv20
thv20

Reputation: 23

javascript if else statement

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!

Upvotes: 2

Views: 577

Answers (6)

Lightness Races in Orbit
Lightness Races in Orbit

Reputation: 385395

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!

Upvotes: 1

Šime Vidas
Šime Vidas

Reputation: 186103

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/

Upvotes: 6

Guffa
Guffa

Reputation: 700840

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;
  });

});

Upvotes: 2

krtek
krtek

Reputation: 26617

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.

Upvotes: 1

Phil
Phil

Reputation: 11175

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

Upvotes: 1

NakedBrunch
NakedBrunch

Reputation: 49423

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

Upvotes: 2

Related Questions