HTML Goodies: Script Tip: Week 39

By Joe Burns

WEBINAR: On-demand webcast

How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >


Das Tip...

     The function part of this script is what takes the choice the user made and creates a hypertext link to it. That's what we're looking at this week.

      Here's the Script and its effect:


function LinkUp()
var number = document.DropDown.DDlinks.selectedIndex;
location.href = document.DropDown.DDlinks.options[number].value;

<FORM NAME="DropDown">
<OPTION SELECTED>--> Choose a Link <--
<OPTION VALUE="scripttip1.html"> Page One
<OPTION VALUE="scripttip2.html"> Page Two
<OPTION VALUE="scripttip3.html"> Page Three

<INPUT TYPE="BUTTON" VALUE="Click to Go!" onClick="LinkUp()">

     This is what we're interested in:

function LinkUp()
var number = document.DropDown.DDlinks.selectedIndex;
location.href = document.DropDown.DDlinks.options[number].value;

     OK, first off, my apologies for going so small on the font. The reason is to show you format. See how the long lines of code all stay on one written line? That's the format. If you change it from that, then you'll get errors. The entire script, a little higher up on the page, truncates the second line. That's bad. Keep it all on one line.

     The function is named LinkUp()for no other reason than that's what I've chosen. It's a name I completely made up. Then comes the curly bracket that will surround the function commands. Then the first line of the function itself:

var number = document.DropDown.DDlinks.selectedIndex;

     This first line assigns a variable name, number, to the value returned from the drop down menu. Remember, the name of the form is DropDown, the name of the select box itself is DDlinks, and the value chosen by the user is represented in JavaScript by selectedIndex.

     Now you have the number chosen by the user returned and assigned the to the variable number. Just keep in mind that JavaScript counts everything, and it starts counting at zero. So the first choice, the zero choice, is no good. That's the one that reads "Choose a Link".

      Now the second line of the function:

location.href = document.DropDown.DDlinks.options[number].value;

     You may remember "location.href" as the JavaScript that creates a link from an earlier Script Tip. If not, then that's what it does. The link then is created by gathering the VALUE from the choice the user has made.

     Once again, a hierarchy statement is created using the name of the form, the name of the select box, and then option[number].

     That [number]is the variable name we just created. It represents the hierarchy statement that will grab the number of the drop down box the user chose. Thus when this script runs, the text "number" will actually be replaced with the number the user chose. Since this drop down box only offers three choices (past the zero choice "Choose a Link"), that number will be one, two, or three.

      Once the script replaces "number" with an actual number is that asks for the VALUE. And what is the value or each OPTION? A hypertext link!

     The script grabs that hypertext link VALUE and the location.href creates the link. Ta da! Pretty clever. However, the link does not actually happen until the function is triggered to work. That happens through the button's onClick="LinkUp()" Event Handler statement. See that above?

     But what if we could set it up so that the button wasn't needed? The user simply made their choice and the link went off immediately. Wouldn't that be cool? We'll do it next week.

Next Week: No Button!

Learn to write your own JavaScripts with the HTML Goodies 30-Step Primer Series

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date