[Solved] JavaScript if / else statement not behaving as expected

by


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/

1

solved JavaScript if / else statement not behaving as expected