HTML Goodies: Script Tip: Week 58

By Joe Burns

 

Script Tip...

Today we look at the functions of the script that "check" the radio buttons for you.

A parser is a server looking to find an item. That's what happens here. The functions know which buttons should be checked, so they run down the line of buttons, parsing and "checking" the correct ones.

Here's the script again:


     Click a chord on the right and watch the dots provide the pattern.


Here's the Code


There's no good way to attack this parsing area of the script because there are multiple functions involved and they work off of one another. I'll delve into it by attacking the function that is first triggered when the user chooses a chord. It's a function called showChord().

function showChord()
{
var Item, Ret, Count, Skip;
for (Count=0; Count < 42; Count++)
{
document.guitar[Count].checked=false
}
Item = document.guitar.chord.selectedIndex;
if (Item != -1)
{
Text = document.guitar.chord.options[Item].text;
Frets = parser (chords[Text])
for (Count = 1; Count <= Frets[0]; Count++)
{

document.guitar[parseInt(Frets[Count])].checked=true;
}
}
}

The user chooses a chord from the right-hand side of the display. By doing this, the onChange Event Handler is engaged. That triggers this function. Read slowly, this gets hairy.

First off, the variables "Item," "Ret," "Count," and "Skip" are brought into play.

Next, a For loop is set up to roll through 41 times. You may think that's a mistake because there are 42 buttons, but no! Note that the loop will roll until the number is less than 42 (that means 41). Plus, the count starts at 0 rather than 1. It has to start at 0 because now we're going to look at the radio buttons and there is a 0 button. (0 to 41 means all 42 buttons are parsed, get it?)

Now, we get to the first line that deals with checking the buttons:

document.guitar[Count].checked=false

This line of code will direct the attention of the function to each of the radio buttons. Remember that the name of the form itself is "guitar." Inside the square brackets is the variable "count" which will start at 0 and count up by one until it hits 41. We know that because "count" was set to 0 in the For loop above.

So, now we have a loop that will check the buttons one by one, setting their checked status to false. But why? They're already false, right? Well, what if you choose a chord and then choose another one? You would want the first to be erased right? Ta da! This sets them all to false. They're erased.

Item = document.guitar.chord.selectedIndex;

The next line is connecting to the drop-down menu and grabbing the selected index number. That's the chord the user chose from the list. That number is given the variable name "Item."

if (Item != -1)
{
Text = document.guitar.chord.options[Item].text;
Frets = parser (chords[Text])

Now, we get into some exchanging of information between this function and the next one called parser().

The script sets up an If statement to get the ball rolling. This is a case of setting up an instance that will never be true just so it can trigger something to happen. It asks if "Item" (the choice the user made from the drop-down menu) is not equal to minus one (-1). Since JavaScript starts counting at 0, one less is sort of the JavaScript equivalent of nothing. That means "minus one." We know that the drop-down list starts counting at 0, so the user can never choose less than 0. Thus, this statement will always be wrong. So... if the choice the user made is not equal to minus one, which it never will be, then we need to do something.

That something is to set "Text" equal to the number in the menu. We do that with the square brackets. Inside those brackets, the variable name "Item" will be replaced with the number it represents.

You can also see that the word "text" has been placed at the end. That is a JavaScript command that forces the script to return the text following the <OPTION> tag.

So, what do we have so far? We have the choice the user made from the drop-down box in text format. Let's say I chose "A13." That is the number three choice (start counting at 0). That choice is now turned from that number choice to the text "A13." With me so far?

Now, we bring in the variable name "Frets" and assign it the value of what will be returned from the next function called parser(). But before we get into parser(), we need to see what it is acting upon.

See how the instance immediately following "parser" has chords[Text] inside? That means that we are passing something to the parser() function. We want it to work on something specifically. In this case, we want it to work upon one of the items found in the array "chords." That's the first very long list of chords that carries the numbers after each array item.

But which array item? We want the one represented by the variable name "Text." If we stay with my choice of "A13" then we will work with chords["A13"]. See how that works? And chords[A13] looks like this:

chords["A13"]="1;3;20;22;23"

Next we get a loop:

for (Count = 1; Count <= Frets[0]; Count++)
{
document.guitar[parseInt(Frets[Count])].checked=true;
}

This loop will start counting at 1 and roll through as long as "Count" is less than or equal to Frets[0].

Each time it rolls through it will check the radio buttons, in order, and if the number of the button appears in the run of numbers chosen by the user, then it will be set to "checked."

But how do the numbers following the array item get to this function to be used? That's what the parser() function does. No, I'm not ignoring the last two lines, but we must have the second function under our belts to understand how the silly thing works. We'll get into it next week.

Next Week: Parse 'Em!

     Do YOU have a Script Tip you'd like to share? How about suggesting a Script Tip to write about? I'd love to hear it. Write me at: jburns@htmlgoodies.com.


Learn to write your own JavaScripts with the
HTML Goodies 30-Step Primer Series
and take the knowledge home with you in
JavaScript Goodies!


You can find many other uses for JavaScript
on your Web pages here!


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