JavaScript if/else not acting as expected

Question

I'm using jQuery to select a button on my website and add an event listener to add a night-time class when it is clicked.

Initially the button works, however when I click the button again it won't run the code to remove the night-time class.

Here is the JavaScript code:

var night_time = false;

if (!night_time) {
  $('.blog-desc').find('a').on('click', function() {
    $('html').addClass('night-time').animate(200);
    night_time = true;
    console.log("Making it night!");
  });
} else {
  $('.blog-desc').find('a').on('click', function() {
    $('html').attr('class', "");
    night_time = false;
    console.log("Making it day!");
});

}

I really don't know why this isn't working, but I feel like I'm missing something painfully obvious. Also, the .animate({}, 200) isn't working either, as it just instantly applies the class, but this problem isn't as important to me as the main one.

Answer 1

Updating your night_time variable won't automagically change the event handler.

Try this instead:

var night_time = false,
    $html = $('html');
$('.blog-desc').find('a').on('click', function() {
    night_time = !night_time;
    $html.toggleClass('night-time', night_time);
    console.log(night_time ? "Making it night!" : "Making it day!");
});

 var night_time = false, $html = $('html'); $('.blog-desc').find('a').on('click', function() { night_time = !night_time; $html.toggleClass('night-time', night_time); console.log(night_time ? "Making it night!" : "Making it day!"); }); 

 .night-time { background: #000; color: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="blog-desc"> <a>Click me</a> </div> 

Answer 2

From you code what I understand is you want to toggle the presents of the class night-time

$('.blog-desc').find('a').on('click', function () {
    $('html').toggleClass('night-time');
});

---

If you want to do something else depending on the state(night/day) you can test for the presents of the class

$('.blog-desc').find('a').on('click', function () {
    var $html = $('html').toggleClass('night-time');
    if ($html.hasClass('night-time')) {
        console.log('now it is night')
    } else {
        console.log('now it is day')
    }
});

---

In your code the problem is the if condition is evaluated only once when the page is loaded then since the default value is false the if block is executed and addClass() callback is executed, the second handler is not registered at all.

If for any reason you want to check a case like this you need to have a single click handler and check the condition within the click handler

Answer 3

$('.blog-desc').find('a').click(function () {
    $('html').toggleClass('night-time');
});

Answer 4

Your conditional is outside of the click handler. You mean for it to behave like this:

var night_time = false;

$('.blog-desc').find('a').on('click', function() {
  if (!night_time) {
    $('html').addClass('night-time').animate(200);
    night_time = true;
    console.log("Making it night!");
  }
  else {
    $('html').attr('class', "");
    night_time = false;
    console.log("Making it day!");
  }
}); 

Answer 5

It looks like you have structured your if statement incorrectly. You would want to check your clicks first then decide if its night_time or not.

$('.blog-desc').find('a').on('click', function () {
    if (!night_time) {
        //code...
    } else {
        //code...
    }
});

Answer 6

The way you have it, only only one click event will be added to your .blog-desc . You should change it so that your logic allows for this button to switch night_time on and off with just one event:

var night_time = false;
$('.blog-desc').find('a').on('click', function() {
    if (night_time) {
        $('html').attr('class', "");
        night_time = false;
        console.log("Making it day!");
    } else {
        $('html').addClass('night-time').animate(200);
        night_time = true;
        console.log("Making it night!");
    }
  });

Answer 7

How about adding a listener just once to the "button" and handling the class change in a single function as well.

Little sample: http://jsfiddle.net/entr0cks/33grpurh/

var $html = $('html'),
    NIGHT_CLASS = 'night-time';

$html.addClass(NIGHT_CLASS);
$html.on('click', toggleNight);

function toggleNight(){
    if($html.hasClass(NIGHT_CLASS)){
        $html.removeClass(NIGHT_CLASS);   
    } else {
        $html.addClass(NIGHT_CLASS);   
    }
}

Answer 8

You needed to move the click event out of the if statement and put the if statement in the click event.

var night_time = false;
$('.blog-desc').find('a').on('click', function() {
    console.log("blog-desc a was clicked");
    if (night_time == false) {
        $('html').addClass('night-time').animate(200);
        night_time = true;
        console.log("night_time value: " + night_time + " (Should be True)");
    } else {
        $('html').attr('class', "");
        night_time = false;
        console.log("night_time value: " + night_time + " (Should be False)");
    }
});