Select a page from the above menu and then:
This will not work unless you select a page. If you use the Browser's back button to return, the link won't work until you select another page.
When a page is selected in the SELECT menu, a function (Writer()) is called. This function sets the text area value to the appropriate description, and loads the URL into a value (URLToGo.) When the text link is clicked, this calls a function which uses the variable URLToGo with the appropriate URL loaded to send the browser to the selected page.
Although it isn't necessary, it is easier to create an ARRAY to hold the text. We do this with the following code:
MyText=new Array;
MyText[1]="This is the contents page where you can find your stuff. ";
MyText[2]="Did you notice that little boxes pop up now and again?."+
" Well here you learn how to get your own back and annoy others"+
" with these pesky blighters!";
The ARRAY, MyText is declared in the first statement above. We then set the values of the ARRAY elements starting with element one (with the numbers in square brackets.) Note that we use the plus sign to join together the long strings. Elements three and four follow the same pattern. Using the ARRAY we have put our text into variables to save us typing it out several times!
| Indx=document.form1.Select1.selectedIndex; TArea=document.form1.MultiText1; | This is code we have met before when we first looked at menus. Indx tells us the option number of the SELECT which the user has selected. Next we define TArea as the Text Area in the form - we use the variable to save typing the complete location. |
| if (Indx==0) { return; } |
Actually, the first option is a description, so we don't want to link to that! So if the first option is selected we do nothing. So if Indx==0, we just return. |
| if (Indx==1) { TArea.value=MyText[1]; URLToGo="index.html" } if (Indx==2) {… |
If the next option (Indx==1) is selected, we
type the text in MyText[1] in the text area, and set another variable, URLToGo as the
contents page for this site. We continue with the same type of code to tell the browser what to do if the other options are selected. We have just written the first bit of the third option. |
So we have put our text in little boxes (variables in an ARRAY), and told the browser what to do if the user selects the options. That is, to type the correct text in the text area and make a variable, URLToGo the name of the file we want to load.
In the code for this page, we have put all the above in a function called Writer(). Finally, we have also put the following code in the HEAD of the document
| function GoToURL() { MyDestination=URLToGo; |
We have named this function, GoToURL(), and created a variable, MyDestination. This is the one we want to go to when the user clicks on the hyperlink. We have made it equal to URLToGo. This variable we have declared right at the top of the code, so when Writer() gives it a value, then we can use it here to specify the destination we want. To understand this, we need to examine the code for the hyperlink in the BODY of the document. |
| if(MyDestination!=null) { location=MyDestination; | We carry out a test to ensure that MyDestination has a value. If we didn't, we'd get a Java Script error. Provided that this variable has a value, we make the LOCATION equal to the file in this value |
< select name="Select1" size="1" onchange="javascript:Writer();return true"> |
The key code for the SELECT is the code calling the function
Writer() in the HEAD of the document. This code writes the description in the text area
and makes the variable, URLToGo equal to the file we want to load. |
< a href="#" onclick="GoToURL();return false;">Go to URL < /a> |
The final key in this is the onClick event which calls the function GoToURL() in the HEAD and loads the appropriate file in the LOCATION of the page. |
You can view an edited version of this page's source to see how the parts of this code work together.