Why isn't the conditional message displaying and instead it executes the rest?

Issue

I am receiving the users input and I want it to validate whether the number is valid. If it is not between 0-100, then I want to show the message 'Not Valid'. Right now even if I enter 2000 it will still display if the user is warm or cold. I want it to stop executing and display the invalid message.

// Hot or Cold JS game.
$(document).ready(function() {
    $('#number').on('keyup keypress', function(e) {
        if (e.keyCode < 48 || e.keyCode > 57)
            return false;
    });
    var randomNumber = Math.floor((Math.random() * 100 ) + 1);

    $('#Enter').click(function() {
        var guessNumber = document.getElementById('number').value;
        if (guessNumber < 0 || guessNumber > 100) {
            // Display invalid input
            console.log('Not valid');
            $('output-container').text('Enter a number between 0 and 100').css('color', 'silver');
        };
        var difference = Math.abs(guessNumber - randomNumber);

        if (difference == 0) {
            // Display to user - "Perfect"
            $('.output-container').text('Perfect').css('color', 'green');
        } else if (difference < 5) {
            // Display to user - You're on Fire!
            $('.output-container').text('You are on Fire!').css('color', 'red');
        } else if (difference < 10) {
            // Display to user - Warm
            $('.output-container').text('Warm').css('color', 'orange');
        } else if (difference < 30) {
            // Display to user - Ice Cold
            $('.output-container').text('Ice Cold').css('color', 'blue');
        } else {
            // Display to user - You must be Frozen?
            $('.output-container').text('You must be Frozen!').css('color', 'royalblue');
        };
    });

    // Start over
    $('#reset').click(function() {
        location.reload();
    });
    $('#show').click(function() {
        $('#show').hide();
        $('#append-number').append(randomNumber);
    });
});

Here is a sample of how it is running. http://jsfiddle.net/jonathanbello/32cuW/

Solution

JSFIDDLE

You just have to add a return false after you output the error. And you were missing the period in output-container

...
if (guessNumber < 0 || guessNumber > 100) {
  // Display invalid input
  console.log('Not valid');
  $('.output-container').text('Enter a number between 0 and 100').css('color', 'silver');
  return false;
};
...

Answered By - Pedro Estrada