Integrating JavaScript and HTML5 - HTML5 and CSS Comprehensive - page 426

Table 9-24 Code to Change Location

Line Code

32 function loadInfo(myForm) {

33 var menuSelect=myForm.Menu.selectedIndex

34

var menuUrl=myForm.Menu.options[menuSelect].value+ “ .html”

35 window.location=menuUrl

36 }

The selectedIndex property is then used on the object name of the select list and
the form provided in the data file. Line 32 defines the function name. The form object,
myForm, is passed to the function from the select list name attribute. In line 33, the
selectedIndex statement assigns the numerical value of the item selected from the list
to the variable menuSelect. In this line, menuSelect is a variable name, myForm is the
identifier of the form that holds the select list, and Menu is the name of the select list.
The options property of Menu refers to the <option> tag in the select list, while select-
edIndex indicates the integer value of the item selected in the select list. Line 34 concat-
enates the value attribute of the selected item (menuSelect) with the file extension .html
to create a URL. The URL name is concatenated to the .html filename extension using
the plus sign (+). Line 35 uses that URL to load that Web page into the browser window.
Line 36 closes the function.

To Enter the User-Defined Function to Link to a New URL
Using the Drop-Down Menu

The following step enters the user-defined function to link to a new URL using the drop-down menu. (Note
that the <option> tags are included in the Data File.)

1

•

Click line 32 if

necessary.

•

Enter the JavaScript

code shown in
Table 9-24 to enter
the options and links
for the drop-down
menu.

code for loadInfo()
user-defined function
to link menu items to
corresponding Web
pages

insertion point
after pressing the
ENTER key twice

•

Press the

e n t e r key
twice after line 36
(Figure 9-10).

Figure 9-10