DOM (Document Object Model)

Part 1: Simple DOM manipulation (building towards a guessing game)

Using what you've learned, set up a webpage for a game.  The first line in the page should be an H1 level element that contains the name of the game.  Beneath that, you should create a SPAN element, with an ID (you can choose this to be whatever you want) so that you can change the text.  The text should start out saying something like 'Keep guessing!'.  Create a JavaScript function that will be called by a button's onClick handler, and when it's called, will change the text to say "You've won!", in bright green text.  Create another JavaScript function that will be called by a different button's onClick handler, and when it's called, will change the text to say "You've run out of guesses, without guessing the number correctly - You've lost!", in bright red text.

Part 2: Simple DOM manipulation (building towards a guessing game)

Building on what you did in the previous part, add a textbox onto your page, so that the user can type in their guess.  You can do this very easily using a variation of the INPUT element, like so:

<INPUT type="text" id="guess" value="Type your guess here"><BR>

Assuming that you've got an element named paragraph, you can very easily get the value of the user's guess using the .value property.

 

function ChangeText()

{

var para = document.getElementById("paragraph");

var txtGuess = document.getElementById("guess");

para.firstChild.nodeValue=txtGuess.value;

}

You should set up your page so that when the user clicks on a button, then you'll change the text of some element on the page to be their guess.

Part 3: Simple DOM manipulation (building towards a guessing game)

Building on the previous parts, you should add another button - when this one is clicked, you should add a new LI (list item) element to the end of a list.  Each time the user makes a guess, add their guess to the end of the list

Part 4: Pulling it all together (optional)

Add a 'reset' button to your program.  When clicked, this button should call a function named InitializeGame, which randomly picks a whole number (between 1 and 32, inclusive at both ends)(this means that it might pick 1, it might pick 32, or it might pick any number in between) to be the 'secret number' that the user is trying to guess.  It should also start a counter variable at 5 (this is the number of guesses the user is allowed to make)

Make a final button, named "Guess For Real".  When this is clicked, it should call a function which retrieves the user's guess from the textbox.  Assuming that the user put in a number, if the user guessed the programs' secret number, then call the function that you created back in Part 1 to tell the user that they've won.  Otherwise, you should add the most recent guess to the Unordered List of guesses, so the user can see what they've previously guessed.  You need to then decrement the counter by one.  If the user is out of guesses, call the function from part 1 that tells the user that they've lost.