How to create a number guessing game in JavaScript?

Question

I need to create a number guessing game that receives a value using document.getElementById and outputs it to a <textarea> using document.getElementByid. I need to create a random number that the user can guess against. The user will put the information into a text box in HTML and as the user guesses it will store the answers in the <textarea>. The first guess will either display too high or too low and then any answer after that will display warmer or colder. I am not sure where to start. Here is a sample of the HTML.

<form>
    <fieldset>
        <legend>Inputs</legend>
        <label for="guess">Your Guess:</label>
        <input type="text" id="guess" value="523"/>
        <input type="button" onclick="yourGuess()" value="submit"/><br/>
        <input type="button" onclick="" value="Show My Guesses"/>
        <input type="button" onclick="" value="New Game"/><br/>
        <input id="cheat" type="checkbox" value="cheat"/>
        <label for="cheat">Cheat</label>
    </fieldset>
    <fieldset>
        <legend> Output</legend>
        <textarea id="output" name="output" rows="5" style="width: 100%;">              
    </textarea>
    </fieldset>
</form>

JavaScript:

function yourGuess()
{
var guess1 = document.getElementById("guess").value;
var guess2 = 501;
var newGuess = Math.floor(guess2);
var n = 0;

if (newGuess < guess1) {
    yourReturn = "Your are too low!!!"
}
else {
    if (newGuess > guess1) {
        yourReturn = "You are too high!!!"
    }
    else {
        yourReturn = "Correct, You are the winner!!!"
    }       
}
}

Answer 1

Here's my go at it:

http://jsfiddle.net/FB8Uh/

<fieldset>
 <legend>Inputs</legend>
 <label for="guess">Your Guess:</label>
 <input type="text" id="guess" value="523" />
 <input type="button" onclick="yourGuess()" value="submit" /><br />
 <input type="button" onclick="" value="Show My Guesses" />  
 <input type="button" onclick="" value="New Game" /><br />
 <input id="cheat" type="checkbox" value="cheat" onclick="showNumberToGuess()" />
 <label for="cheat">Cheat</label>
 <div id="cheatShow" style="display: none;">
  <input id="numberToGuess" type="text" />
  <label for="numberToGuess">Number to guess</label>
 </div>
</fieldset>
<fieldset>
 <legend> Output </legend>
 <textarea id="output" name="output" rows="5" style="width: 100%;"></textarea>
</fieldset>

The Javascript:

<script type="text/javascript">
function yourGuess() {
    guess = document.getElementById("guess").value;
    guesses = document.getElementById("output");

    if (guess == numToGuess) {
        guesses.value = guesses.value + "\r" + "You have guessed correctly! ("+guess+")";
    } else if (guess > numToGuess) {
        guesses.value = guesses.value + "\r" + "You guessing too high!("+guess+")";
    } else {
        guesses.value = guesses.value + "\r" + "You guessing too low!("+guess+")";
    }
}

function showNumberToGuess() {
    if (document.getElementById('cheat').checked) {
        document.getElementById('numberToGuess').value = numToGuess;
        document.getElementById('cheatShow').style.display = 'inline';
    } else {
        document.getElementById('numberToGuess').value = '';
        document.getElementById('cheatShow').style.display = 'none';
    }
}

var numToGuess = Math.floor(Math.random()*500);
</script>

UPDATED

http://jsfiddle.net/FB8Uh/4/

The HTML:

<fieldset>
 <legend>Inputs</legend>
 <label for="guess">Your Guess:</label>
 <input type="text" id="guess" value="523" />
 <input type="button" onclick="yourGuess()" value="submit" /><br />
 <input type="button" id="showguesses" onclick="showGuesses()" value="Show My Guesses" />  
 <input type="button" onclick="generateNumberToGuess(true)" value="New Game" /><br />
 <input id="cheat" type="checkbox" value="cheat" onclick="showNumberToGuess()" />
 <label for="cheat">Cheat</label>
 <div id="cheatShow" style="display: none;">
  <input id="numberToGuess" type="text" />
  <label for="numberToGuess">Number to guess</label>
 </div>
</fieldset>
<fieldset id="guesses" class="guesses">
 <legend> Output </legend>
 <textarea id="output" name="output" rows="5" style="width: 100%;"></textarea>
</fieldset>

The Javascript:

function yourGuess() {
    // You can store references to the value and the
    // guesses textarea in local function variables.
    var guess = document.getElementById("guess").value;
    var guesses = document.getElementById("output");

    // First, if the guess is the same, just show the answer.
    // Append onto the textarea the result.
    if (guess == numToGuess) {
        guesses.value = guesses.value + "\r" + "You have guessed correctly! ("+guess+")";
    } else if (guess > numToGuess) {
        guesses.value = guesses.value + "\r" + "You guessing too high!("+guess+")";
    } else {
        guesses.value = guesses.value + "\r" + "You guessing too low!("+guess+")";
    }
}

function showNumberToGuess() {
    // Show the randomly generated number if the onclick event
    // fires and the checkbox is check; otherwise, remove the
    // number and hide using display: none;.
    if (document.getElementById('cheat').checked) {
        document.getElementById('numberToGuess').value = numToGuess;
        document.getElementById('cheatShow').style.display = 'inline';
    } else {
        document.getElementById('numberToGuess').value = '';
        document.getElementById('cheatShow').style.display = 'none';
    }
}

// Randomly generate a number
function generateNumberToGuess(confirmIt) {
    var guesses = document.getElementById("output");

    // First, confirm this is what we want if the confirmIt
    // argument was passed.
    if (confirmIt && !confirm('Restart game with new number?')) {
        return;
    }

    guesses.value = '';
    numToGuess = Math.floor(Math.random()*500);
    guesses.value = "New number generated.\n";

    // Don't forget to hide the new number.
    document.getElementById('numberToGuess').value = '';
    document.getElementById('cheatShow').style.display = 'none';
}

function showGuesses(){
    var guesses = document.getElementById('guesses');
    var btn = document.getElementById('showguesses');

    if (guesses.style.display != 'block') {
        guesses.style.display = 'block';
        btn.value = 'Hide My Guesses';
    } else {
        guesses.style.display = 'none';
        btn.value = 'Show My Guesses';
    }
}

window.onload = function(){
    generateNumberToGuess();
}