HTML Goodies: Script Tip: Week 57

Look… it’s a Tip!

All right! We have our run of radio buttons seven high by six wide. Now, let’s look into how the chords are built into that bank of little radio dots.

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

In this Tip, we’ll look into the two long lists of chords and what they mean. Let’s take the second one first. This is the one that appears in the right-hand table cell. It’s the last thing in the script:

<SELECT NAME=”chord” SIZE=7 OnChange=”showChord()”>


<OPTION>A

<OPTION>A7

<OPTION>A9

<OPTION>A13

All the items in here have been deleted to save space

<OPTION>Gdim7

<OPTION>Gm

<OPTION>Gm7

</SELECT>

Look familiar? It should. It’s a basic drop-down menu. It’s just very, very long. The menu is part of a form named “guitar.” You can see that in the third line of the full script.

The drop-down box itself is named “chord.” So, now we have all the parts of the form and can grab one of the elements from this drop-down box through “document.guitar.chord.”

The select box is set to show seven choices (that’s why it’s so long) and when one of the elements is chosen, an onChange Event Handler triggers a function called showChord(). We’ll get to that function in the next Tip. Now, let’s turn our attention to the very top of the script:

var chords = new Object();

chords[”A”]=”1;5;14;15;16″

chords[”A7″]=”1;3;5;14;16″

chords[”A9″]=”3;4;5;14;25;30″

chords[”A13″]=”1;3;20;22;23″


List edited to save space

chords[”Gdim7″]=”3;7;14;16;18″

chords[”Gm”]=”2;3;7;18;22″

chords[”Gm7″]=”18;20;21;22″

This is the same list as is found in the drop-down menu. Sharp-eyed Script Tippers will see this is an array right off. The array is called “chords.” At a later date, we’ll bring the chord name (that the user chose) and the number series (following the corresponding chord) together in this array.

Before we get into that it’s important for you to understand exactly how the chord is created. It looks hard, but it’s actually pretty easy. Let’s take a basic chord, E major. It looks like this:

Obviously, that wasn’t created with the script. I built this out of radio buttons by setting the ones I wanted to be “checked,” but it’s a good representation of how the script works. The chord E major is represented this way in the array:

chords[”E”]=”0;4;5;9;13;14″

There are six numbers following: 0,4,5,9,13, and 14. Those numbers denote what radio buttons should be checked.

Huh?! Zero?!

Yep. Remember one of my first rules of JavaScript: It counts everything and it counts everything starting at zero. The script counted the radio buttons as it made them. The author didn’t have to do anything. The script counted the buttons without any prompting. It’s just what JavaScript does.

There are 42 radio buttons (6×7) numbered 0 through 41, starting in the upper left-hand corner and following down left to right, row by row. So, if you count the radio buttons and make a point of “filling in” the 0th, 4th, 5th, 9th, 13th, and 14th button, you’ll get the E chord pattern. Like so:

The author took the time to figure out which radio buttons must be checked in order to display the chord requested. We thank him for doing that (Thank You For Doing That!). I can only imagine how rough it would have been to create a JavaScript without this bit of information. Ugh!

We have our block of radio buttons, drop-down chord menu, and array of chord buttons to be checked. The trick now is to get the buttons to check themselves. It’s a little more involved than you may think.

Next Week: Check ‘Em!