HTML Goodies: Script Tip: Week 66

Script Tip…

     Now we understand the concept of color and the drop down menus. Now let’s build the table so we can act upon it.

     The code for the table is written to the page through JavaScript document.write commands. It looks like this:

document.write(“<TABLE BORDER=”0″ CELLPADDING=”0″ CELLSPACING=”0″ WIDTH=”100%”>”);


document.write(“<FORM NAME=”Color”>”);


document.write(“<TD BGCOLOR=”#000000″ HEIGHT=”25″ ID=”box” COLSPAN=”4″></TD><TR>”);


document.write(“<TD WIDTH=”25%”><FONT COLOR=”#ffffff” FACE=”arial, geneva, times new roman” SIZE=”2″><B>Red: </B></FONT><SELECT NAME=”red” ONCHANGE=”mix();” SIZE=”1″>”+menu+”</SELECT></TD><TD WIDTH=”25%”><FONT COLOR=”#ffffff” FACE=”arial, geneva, times new roman” SIZE=”2″><B>Green: </B></FONT><SELECT NAME=”green” ONCHANGE=”mix();” SIZE=”1″>”+menu+”</SELECT></TD><TD WIDTH=”25%”><FONT COLOR=”#ffffff” FACE=”arial, geneva, times new roman” SIZE=”2″><B>Blue: </B></FONT><SELECT NAME=”blue” ONCHANGE=”mix();” SIZE=”1″>”+menu+”</SELECT></TD><TD WIDTH=”25%”><INPUT NAME=”code” MAXLENGTH=”7″ SIZE=”10″ TYPE=”text” VALUE=”#000000″></TD><TR>”);


document.write(“</FORM>”);

document.write(“</TABLE>”);

     Yes. You see how messed up it looks. But let’s take it step by step and you’ll quickly see how it works.

     To begin with, the table is created:

document.write(“<TABLE BORDER=”0″ CELLPADDING=”0″ CELLSPACING=”0″ WIDTH=”100%”>”);

     The table will have no border, no cell padding or spacing and will span across the width of the page (100%).

     Next, a form is started. Remember that we’re going to use drop down boxes and they are form elements so we need a form.

document.write(“<FORM NAME=”ColorMix”>”);

     The name of the form is “Color”.

     Next, the first table cell, the one that will span the others, is written to the page:

document.write(“<TD BGCOLOR=”#000000″ HEIGHT=”25″ ID=”box” COLSPAN=”4″></TD><TR>”);

     The cell has a black background, is 25 pixels high, has the ID name “box” and spans the next four columns. Now the three drop down menus.

     You may notice that the next line is way longer than it has to be. This could be written with multiple document.write statements, but the author chose to put it all on one line. No sweat. It works just the same.
Let’s take just the first part of it:

<TD WIDTH=”25%”><FONT COLOR=”#ffffff” FACE=”arial, geneva, times new roman” SIZE=”2″>
<B>Red: </B></FONT>

<SELECT NAME=”red” onChange=”mix();”
SIZE=”1″>”+menu+”</SELECT></TD>

     This is the first of four table cells. The background color is white, the font face is arial, and it will contain the Red drop down menu. Now the clever part.

     Notice that what is contained within the table cell are the beginning commands for
a select box. The NAME will be “red” and when something changes within the box (onChange), a function named mix() is called into play.

     Then a variable named “mix” is called for. Then, the select box is ended. But what is “mix”?

     Look at the full script again. “Menu” is a text string made up of the entire drop down menu we discussed in the last Script Tip.
That’s the reason you only see one drop down menu in the code yet three pop up in the browser window. The author set the box to a variable name and then calls for it three times. Why not? All three menus are the same and it saves on typing time. WooHoo!

     If you continue through the table code, you’ll see the next two cells being created exactly the same way except the next one has the NAME “green” and the third has the NAME “blue”.

     The last blip of code in that long run creates the text box that will receive the
hext code. It looks like this:

<TD WIDTH=”25%”><INPUT NAME=”code” MAXLENGTH=”7″ SIZE=”10″ TYPE=”text” VALUE=”#000000″></TD><TR>”);

     The text box is given the name “code” and a value of #000000 that displays when the page is first loaded. That’s what the three drop down menus will read so that’s what is displayed.

     Finally an /FORM and /TABLE is written to complete the table.

     Now we have a table with parts we can grab through hierarchy statements. The text box is reachable through document.ColorMix.code.value and each drop down menu will read the same except the color will appear where “code” is in the statement, document.ColorMix.red.value, document.ColorMix.blue.value, document.ColorMix.green.value.

     The box that receives the color is a little different. It carried an ID and will be affected by a function we’ll hit next time around.

Next Week: The Functions