Javascript Guide
Using Forms

<form name="myForm">
What is your name?<BR>
<input type="text" name="myName"> <BR>
<button type="reset">Reset</button>
<button onclick="myFunction()"> Press Me! </button>
</form>

The following function is in the head of the document.

function myFunction() {
var person = document.myForm.myName.value
document.write("Your name is " + person)
}

This code produces a text box and 2 buttons. The reset button clears any text entered into the text box. The second button calls the function when clicked. (Onclick is an event handler used to call a function when the specified element is clicked). The name of the person is then written to the screen. Because the page has already loaded this information is outputted to a new page.

The value that has been entered into the text box is copied to the variable person with the statement var person = document.myForm.myName.value. Each different form element should have a unique name to allow its contents to be referenced and used by Javascript.

Exercise 11

Copy and use the code listed above to produce a game which writes a story based on words that the user enters into a form. Eg. User enters the name Cartman in a text box labelled Enter a name. When the story is outputted, it reads, Once upon a time there was a boy called Cartman.... Your story should include at least 5 items from the user.