How do I display text using jQuery without having it disappear?

Issue

How do I display text using jQuery without having it disappear?

When the user types in a number. I then want to display a certain message - You're hot cold warm etc. Right now the message flashes into the screen, but I want it to stay and then the user can continue playing until he gives up and wants to display the random number or reset the game.

The only thing relevant in the html is:

    <div class="output-container">

    </div>

which is where I want to display the message.

Here is the application.js:

// Hot or Cold JS game.
$(document).ready(function() {
    var randomNumber = Math.floor((Math.random() * 100 ) + 1);

    $('#Enter').click(function() {
        var guessNumber = document.getElementById('number');
        var difference = Math.abs(guessNumber - randomNumber);
        
        if (difference == 0) {
            // Display to user - "Perfect"
            $('.output-container').append('Perfect');
        } else if (difference < 5) {
            // Display to user - You're on Fire!
            $('.output-container').append('You are on Fire!');
        } else if (difference < 10) {
            // Display to user - Warm
            $('.output-container').append('Warm');
        } else if (difference < 30) {
            // Display to user - Ice Cold
            $('.output-container').append('Ice Cold');
        } else {
            // Display to user - You must be Frozen?
            $('.output-container').append('You must be Frozen!');
        };
    });
    
    // Start over
    $('#reset').click(function() {
        location.reload();
    });
    $('#show').click(function() {
        $('#show').hide();
        $('#append-number').append(randomNumber);
    });
});

Solution

Quick demo

Changes to Javascript:

var guessNumber = document.getElementById('number').value;
...
// $('.output-container').append(...)  // BAD
$('.output-container').text(...)  //GOOD

And either make #Enter be a plain type="button" or add return false; at the end of the .click() handler. Otherwise it's going to keep submitting and reloading the page.

Answered By - Deryck