Overview | Part B Folder | newStory function | User Input | Build Story | Image | Gender | Caps Function | A/An Function | Image Rollover | Story Window | Questions

Retrieve user input

 

After your user enters words in the form and clicks the Create Story button, you must retrieve the input data before the newStory function can use it. First you will declare the variables where you will put the input data and then you will assign the user data to the variables. Use your form's names, not the one shown here. It's just an example.

1. At the very top of the newStory function's statement body, declare a variable for each input field. Repeat for each input field on your form. Be sure to use the id's you used in your input form. This section will retrieve the user input.
   
   
   function newStory()
   {
       /************
       DECLARATIONS
       ************/
       var word1 = document.getElementById("word1").value;
       var word2 = document.getElementById("word2").value;
       //Continue with as many as you have text boxes on your form.
       //Include genderlist from your dropdown menu.
   }
   
   
   
2. Check that your script is retrieving the user input properly by changing the wording on the alert (created in Step 4 on the previous page). Replace the alert with this one immediately before the newStory() function's closing }.
   
   
       alert('Word1: ' + word1);
   
   
   
3. Save your file and preview in Firefox. Enter text in the first text box. Click on the Create Story button. Does the alert pop up with the text you entered in the first box? If so, you have verified that the onclick event works and the user data is being retrieved by the function.
   
   Don't worry when your story appears without any styling. You'll add that on the last page of the instructions.
   
   If you have problems:
   • Check spelling of your id's (JavaScript is case sensitive)
   • Make sure your variable names don't have spaces (use underscores or camelback notation instead)
   • Make sure your HTML page uses each id only once; that it's unique. Variable names can be used many times but id's can't.
   • Use the Firefox Error Console. If the Error Console tells you that your variable is undefined, be sure to enter something in your first text box. Undefined means no value has been entered.
     

4. Go to the Catalyst WebQ and answer Question 4.

Now that you have retrieved the user data, let's build your story...