JavaScript if / else statement not behaving as expected

Question

Can anyone check this part of code please? I think there's an syntax problem in it but I can't figure out what it is. I'm more like a designer so I have very basic javascript skills

$(document).ready(function(){
var lightstand = 0;

    $('.light').on('click', function() {
        if(lightstand == 0) {
            $('.card').css('background-image','url(img/SOCMUT_eindejaarskaartje_10-2016_HR_BLANCO.jpg)');
            $('#canvas').css('opacity','1');
            var lightstand = 1;
        } else if (lightstand == 1) {
            $('.card').css('background-image','url(img/SOCMUT_eindejaarskaartje_10-2016_HR_BLANCO12.jpg)');
            $('#canvas').css('opacity','0');
            var lightstand = 0;
            }
    });
});

Why do you think there's a syntax problem? Is there some *actual indication* of an error? — David, Dec 16 '16 at 14:28
You *think* there's a syntax problem with it? What problem are you actually experiencing? — , Dec 16 '16 at 14:30
Syntactically the code seems fine, though re-declaring that same variable in the `if` and `else` blocks doesn't seem logically correct. I suspect you want to set the value of the existing variable, not declare a new one. — David, Dec 16 '16 at 14:30
In all seriousness, no. The syntax looks fine.. You should check to see if there are any errors and post them with your question — Fueled By Coffee, Dec 16 '16 at 14:30

Robert · Answer 1 · 2016-12-16T15:50:30.890

1

I think you're experiencing issues because you're declaring your variable nightstand multiple times.

Try this:

$(document).ready(function(){ var lightstand = 0;
    var lightstand = 0;
    $('.light').on('click', function() {
        if(nightstand === 0) {
            $('.card').css('background-image','url(img/SOCMUT_eindejaarskaartje_10-2016_HR_BLANCO.jpg)');
            $('#canvas').css('opacity','1');
            lightstand = 1;
        } else if (lightstand == 1) {
            $('.card').css('background-image','url(img/SOCMUT_eindejaarskaartje_10-2016_HR_BLANCO12.jpg)');
            $('#canvas').css('opacity','0');
            lightstand = 0;
            }
    }); 
});

Edit:

Just to further elaborate on what you can do in the future: - If you think an if/else statement is not behaving correctly, test it with

alert('hello from IF'); 
alert('hello from ELSE');

Alternatively you can use:

console.log('text');
console.log(variable);

If you think there's something wrong with your syntax, check if using jshint.com

edited Dec 16 '16 at 15:50

answered Dec 16 '16 at 14:36

Robert

1,899
1
17
24

This does the trick Robert thanks. Can you explain what you changed? What's the difference between === and ==? – MDC Dec 16 '16 at 14:40
`===` checks to see if they are the same type and equal; `==` checks to see if they are logically the same. So 0==false, but 0!===false – Autumn Leonard Dec 16 '16 at 14:42
But the bigger change was not re-declaring `int lightstand` in your if-else block. – Autumn Leonard Dec 16 '16 at 14:43
@MDC have a look here: http://stackoverflow.com/questions/523643/difference-between-and-in-javascript but note that this had nothing to do with the solution :) – Robert Dec 16 '16 at 14:45
== will convert both sides to a similar type (usually a number, or a string) before checking for sameness. === will look at value type and value in its evaluation. != and !== work similarly. – Patrick Denny Dec 16 '16 at 14:47

score 0 · Accepted Answer · answered Dec 16 '16 at 14:41

Your problem is in resetting lightstand. by putting var in front of it inside thew click event handler, you are creating a new lightstand variable in the that function's scope. Remove var there and JavaScript will move up the scope chain to find the outer lightstand and set it.

$(document).ready(function(){
   var lightstand = 0; //KEEP VAR HERE

   $('.light').on('click', function() {
       if(lightstand == 0) {
           $('.card').css('background-image','url(img/SOCMUT_eindejaarskaartje_10-2016_HR_BLANCO.jpg)');
           $('#canvas').css('opacity','1');
           lightstand = 1; //REMOVE VAR FROM HERE
       } else if (lightstand == 1) {
           $('.card').css('background-image','url(img/SOCMUT_eindejaarskaartje_10-2016_HR_BLANCO12.jpg)');
           $('#canvas').css('opacity','0');
           lightstand = 0; //REMOVE VAR FROM HERE TOO!!
        }
    });
});

Here's a fairly good run down on scope in JavaScript http://ryanmorr.com/understanding-scope-and-context-in-javascript/

I think I got it. Thanks for the help! – MDC Dec 16 '16 at 14:50 — MDC, Dec 16 '16 at 14:50

JavaScript if / else statement not behaving as expected

2 Answers2