Why does this if/else statement always execute the if branch?

Question

Hey guys I know that there exists .slideToggle() but I want to add more features later.

I don't know what I'm doing wrong, sliding up works but I cannot slide down.

Can I not overwrite my var? Would be very nice when somebody can help me.

$(document).ready(function () {

    var resizeValue = true;
    $(".resizeSelect").click(function () {
        if (resizeValue === true) {
            $(".resize").slideUp(

            function () {
                $('.parent').height($('.child').height('100'));
            });
            var resizeValue = false;
        } else {
            $(".resize").slideDown(

            function () {
                $('.parent').height($('.child').height('100'));
            });
            var resizeValue = true
        };
    });
});

have you tried to put in some consol / alert logs, to see where the code hangs ? — Dukeatcoding, Feb 07 '13 at 14:46

score 8 · Accepted Answer · edited Feb 07 '13 at 15:02

8

You shouldn't redefine the resizeValue variable within the click function. Just remove var from var resizeValue (it should only be used at the top of the ready-function).

edited Feb 07 '13 at 15:02

Joachim Sauer

291,719
55
540
600

answered Feb 07 '13 at 14:48

Thobias Karlsson

96
3

This points to this answer about pass-by-reference in JS: http://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language – Alfabravo Feb 07 '13 at 14:51

score 6 · Answer 2 · answered Feb 07 '13 at 14:48

Because you are redeclaring your variable resizeValue in your function instead of update it :

$(document).ready(function () {

    var resizeValue = true;
    $(".resizeSelect").click(function () {
        if (resizeValue === true) {
            $(".resize").slideUp(

            function () {
                $('.parent').height($('.child').height('100'));
            });
            //DO NOT DECLARE NEW VARIABLE WITH VAR
            resizeValue = false;
        } else {
            $(".resize").slideDown(

            function () {
                $('.parent').height($('.child').height('100'));
            });
            //DO NOT DECLARE NEW VARIABLE WITH VAR
            resizeValue = true
        };
    });
});

Why does this if/else statement always execute the if branch?

2 Answers2