WbWizard's JS Book

Blue Line

Lesson 16: Prompt()

Today we will discuss the prompt() method of allowing your page's visitors to input information you may need to create an interactive experience. JavaScript allows many input methods, including files, forms, and dialog boxes (alert, confirm, and prompt), and these input methods allow you to give decision making power to the visitor, creating a unique and memorable experience for each individual visitor and/or visit.

Once again, we will depart from our normal discussion format and create a simple usable page color preferences script using prompts as the input method.

If your page has limited graphics but tons of text, your visitors may have a preferred color scheme that is "easier" on their eyes as they read your content. Computer users can setup style sheets that will set default colors for all webpages and/or override a webpage's color schemes entirely and only use the user's preferred colors. You too can offer such a feature (even for WebTv users)!

Prompt Syntax- prompt('text','input');

For our example, we can use a prompt to ask the user for their preferred background color by setting the bgColor property of the document object equal to the prompt's input value:

You can use a prompt to set the value of a variable, or as a variable itself in an expression or call to a function or other method. The prompt will return the string entered, or null if cancel is pressed. Notice that I use the current background color as the default input text. You can use any string or variable (properties are variables remember) as the default input, or use two single quotes for an empty input line in the prompt dialog box: prompt('text','');

Expanding on this, we can add the same type of prompts for text and link

+ vlink colors:

Due to their dependancy on the input from the user, prompts are modal, meaning they pause script execution until the user enters a value and presses return or cancels the prompt with the cancel button. This can cause timed and other special scripting effects to be interrupted or in some other way interferred with. For this reason, you may prefer to use form fields (<input><select>and<textarea>) to gather input from visitors (not to mention popups are aggravatting!). Here is an interesting interplay between the three dialog boxes that can help you to understand the return values of dialogs, the return values will appear in the boxes for the next prompt in the sequence:

Easy Pad

Blue Line
Lessons by
Jerry aka WebWizard