If statement only checks variable value once in javascript

I am trying to understand how javascript (jquery in this case) if statements work. I thought i understood but i don't fully get some things. Please see the code below. Why is it when i click on the element with the class of "cat" that it does not remove the class of "black" and add the class of "red".

$(function() {

 var cat = true;

$( ".cat" ).click(function() {
  cat = false;
});

if (cat === true) {
  $('.cat').removeClass('red').addClass('black');
} else {
  $('.cat').removeClass('black').addClass('red');

}
});

i know there is probably a very simple answer to this but i'm just learning so any help would be appreciated, thanks in advance.