| Main Site Topics Ken Ward's JavaScript Tutorial 1 |
The following select is a drop-down menu similar to the one
in JavaScript1. The main difference is that it use
getElementById to find out which item in the list is selected. After the user has selected
an item and presses the "Go to Article" button, the following code is in the
"onClick" event:<input TYPE="BUTTON" NAME="B2" VALUE="Go to Article ..."
onClick=" goToPage763('idSelect')">
The "onClick" calls a function named "goToPage763", and uses the
ID of the select. Note that the ID is in quotes. The relevant HTML for the select is:
<select id="idSelect">
When the button is clicked, the function,
"goToPage763('idSelect')" is called. The following is the function:
<script type= "text/javascript">
<!-- //
function goToPage763(theSelect)
{
var
mySelect=document.getElementById(theSelect);
theIndx=mySelect.selectedIndex;
{
if
(
mySelect.options[theIndx].value != "none"
)
(
location = mySelect.options[theIndx].value)
}
}
//-->
</script>
The significant difference between this code and the previous
code is the line above in blue. We identify the select by using its id.
|
Java Script
Tutorial TOC |
