ava script tutorial - a new approach by Ken J Ward

Java Script Tutorial - getElementById


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.

 

[If you need to learn more about HTML visit the HTML Tutorial]

I am always pleased to hear from you.
Send your comments to