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

Create the newStory() function

 

1. In Dreamweaver, Expression Web, SharePoint Designer, or a simple text editor like NotePad2 textWrangler, open your fit100/storytellerB/storytellerForm.html.
   
   
2. In Code View, add opening and closing script tags in the header after the title.
   
   
3. After the opening script tag, add the newStory function:
   
   
   <script type="text/javascript">
       function newStory()
       {
           //your code will go here
       }
   </script>
   
   
   
   
4. Replace "//your code will go here" with an alert that will fire when you click the Create Story button:
   
   
   alert("Onclick called the newStory function!");
   
   
   
5. To trigger this action, go to the Create Story button. Change the onclick event to trigger the newStory function:
   
   Preview in Firefox
   
   Dreamweaver. Click the tiny arrow next to the globe and choose Preview in Firefox. If Firefox doesn't appear, follow the instructions for NotePad2 and its clones.
   
   NotePad2. From the Firefox menu, select File > Open file and navigate to your storytellerB folder and open storytellerB.html.
   
   Firefox Error Console
   Find and fix errors quickly. From the Firefox menu, select Tools > Error console.
   
   Reload JavaScripted page
   Highlight the URL in the address bar. Press Enter. That will clear any user data in the input fields. onclick="newStory()"
   
   
6. Save the file and preview in the Firefox browser.
   
   
7. In Firefox, click the Create Story button. Did the alert pop up telling you that the newStory function was triggered?
   
   Firefox Error Console
   If the alert did not appear, use the Firefox Error Console to fix errors quickly: It's even easier if you install the Web Developer's toolbar. Watch the Fix Errors Fast video (17 min.).
   
   Use this process to test for errors with the error console:
   
   
   1. Open the error console (Tools > Error console).
      
      
   2. Clear all errors.
   3. Click on the refresh button to reload the page.
      
      
   4. Check the error console, fix any errors, clear the error console. Repeat until all errors are fixed.
      
      

      When any errors are fixed, enter some test data and click the Create Story button. Any code attached to the onclick event will run. Check the Error Console again. Fix any errors, clear the console, click the button, and check the Error Console again. Repeat until all errors are fixed.

8. Go to the Catalyst WebQ and answer Questions 2 and 3.
   

Now that you've started the newStory function, you're ready to retrieve the user input from the form....