Mini-Lab: JavaScript Objects (Updating Mad Libs)


In this mini-lab you will improve your Mad Libs page by displaying its output right on the page, rather than producing alert messages. You will also include a last modified date on the page.

Using the innerHTML property for Mad Libs output:

  1. Modify your Getting Started with JavaScript / Mad Libs web page to create a second horizontal rule (<hr>) at the bottom of your page (but before the </body tag).
  2. Put tags for an empty division (<div>) between the two horizontal rules. You will be putting your Mad Libs output in this division, so you need to give it a meaningful id attribute.
  3. Modify your Mad Libs function to write your output into your new (previously empty) division. Test your modification.
  4. What happens if you click the Generate a Mad Lib button several times in a row? Do you see several Mad Lib stories, or does each one replace the one that was there before? If they are replacing each other, modify your code so that you can see all of them. (What happens, though, if you reload the page?)

Adding a Last Modification Date to the Mad Libs web page:

  1. Put tags for an empty paragraph (<p>) or division (<div>) element after the last horizontal rule on your page (but still before the </body tag). You will be putting a last modification date here, so you need to give it a meaningful id attribute.
  2. Create a function in the script section at the top (HEAD) of your page that will print a statement to your new HTML element such as:

    This page was last updated on 12/13/2015 13:46:32.

    Your function should be preceded by a comment giving its purpose. For example, you might start out with:
        // Print last modification date.
        function setLastModDate()
    You can get the last modification date for a web page from its document object: document.lastModified. Print it to your new HTML element in the same way that you printed your Mad Libs output to an HTML div element above.
  3. Reload your page. Does your web page now include a last modification date?

    Note: Having a function definition is not enough, just as having the assembly instructions for a chair or a recipe for biscuits are not enough when you want to sit down and eat a snack. Someone has to execute the instructions: assemble the chair or cook the biscuits. In the same way, having a function definition is not enough; the program must call the function in order for it to be executed.

    In your previous examples, your functions have been called when the user clicked on a button, as the call was part of the button's onclick attribute. This new function, however, should always be called, without depending on a user action. To achieve this, add a script tag like the following at the bottom of your page (just before the </body tag):

        <script> setLastModDate(); </script>
    (The function call should match whatever name you gave your function in the previous step.)

Polish & Publish your first program:

  1. Polish:
  2. Publish: Upload your modified web page to the server and test that it works there. (Remember that the host name for uploading is If you worked in a team, each member of your group should do this, so each of you has a link to the new mini-lab page. Test that the link to the Mini-Lab works on the server by clicking on it from your home page.