HTML Goodies: Script Tip: Week 50

 

I’ve written 50 of these things?

Half a hundred later and still going strong. Absolutely nothing can go wrong… go wrong… go wrong…

Here’s the script and its effect once again:

---

See it in Action

---

Here’s the Code

(It’s big. Get it all.)

---

We jump to the bottom again to get a handle on the buttons. You’ve probably noticed by now that this script has many of the same function types again and again. There are a bunch of buttons that display, but they all work pretty much the same way. Each has an onClick Event Handler that triggers a function found farther up the page. Last week we looked at the six functions that correspond with the six frameset buttons. What I didn’t mention was how the text got into the TEXTAREA box.

First a few names. Take a look at the code toward the bottom. You see that multiple FORM elements are used. The NAME of the form itself is “Framer.” The top TEXTAREA box is named “Fillit.” The bottom box is named “Pastebox.”

When I spoke about the six frame functions last time, I neglected the code document.Framer.Fillit.value that started each one. That code points to the first TEXTAREA box setting its value. That’s why the text appears where it does.

That’s easy enough, but how does the text get pasted from the top box to the bottom box? Again, a button is involved, triggering the paste. The button’s purpose is to fire the function Copy(). It looks like this:

function Copy()

{

if (document.Framer.Fillit.value==””)

{ alert (‘The top box is empty.’) }

else

{ document.Framer.Pastebox.value=document.Framer.Fillit.value }

}

The function is an IF/ELSE conditional statement. If the top box (document.Framer.Fillit.value) is empty (“”), then throw up an alert that says so. Otherwise, what is in document.Framer.Fillit.value should now go into document.Framer.Fillit.value.

So far, so good, but there are two more buttons to deal with.

The “Start Over” button is similar to the one we just looked at. In fact, it fires the same Copy() function. The only difference is that it first launches an alert box that is intended to put you at ease. The button code looks like this:

<INPUT onClick=”alert(‘Misfire? No problem.’);Copy()”
type=button value=”Start Over”>

See how it’s done? The alert code is followed by a semicolon and then the function name. Nice effect.

The “Clear All” button fires another function named reset(). Don’t bother looking for it, it isn’t there. “Reset” is a function built into the browser. When you make guestbook forms, you create a reset button through the code:

<INPUT TYPE=”reset”>

In this case, the coding is just a little different to allow you to put text on the reset button. Here’s how the author did it:

<INPUT onClick=reset()
type=button value=”Clear All”>

One click and everything goes away! Just remember that for this effect, every FORM element must be between the same FORM and /FORM flags or only those elements within the reset’s FORM flags will erase.

Only one thing left to do: Open the new window and display it.

Next Week: Display It!

---

Learn to write your own JavaScripts with the JavaScript Goodies!

---

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