External JS Not Functioning

[Teaman]

I have moved JS code that was in the .cfm page directly (not in an
external file) and moved it to an external file, just like the
Tutorial Part 7 talks about.
http://greatbiztoolsllc.trac.cvsdude.com/mach-ii/wiki/MachIIPrimerPart7

The JS code has some functions called within a web form. For example
when a form element textarea is typed in, a function is called to
count the length of the text typed and updates the display of the
count in another form element text field. It worked fine where it came
from in the non-Mach-ii files. Now that I've moved it, none of the
functions work. The error is that the referenced form elements are not
defined. I make sure my placement of the JS file load occurs AFTER
the form on the page so that the form elements are defined by the time
the JS code is read.

I haven't tried moving the JS code back into the .cfm file but I
wanted to check to see if others have encountered this or are aware of
how to resolve this and could pass along any suggestions. Meanwhile
I'll probably put the code inline and see if it works there.

One sample function in the .js file (external):
// update the input field containing the length of the web alert text
field
function update() {
alert(document.main.webAlertLen.value);
var old = document.main.webAlertLen.value;

document.main.webAlertLen.value=document.main.webAlertText.value.length;
if(document.main.webAlertLen.value > limit && old <= limit)
alert('Too much text in the description!');
if(document.main.webAlertLen.value > limit) {
if(document.styleSheets) {
document.main.webAlertLen.style.fontWeight = 'bold';
document.main.webAlertLen.style.color = '#ff0000';
}
}
else if(document.main.webAlertLen.value <= limit &&
document.styleSheets ) {
document.main.webAlertLen.style.fontWeight = 'normal';
document.main.webAlertLen.style.color = '#000000';
}
}

My .cfm view file has a web form ...
<form action="index.cfm?event=processDoc" method="post" name="main">
...

<div>
<label for="webAlertText">Web Alert Text:</label>
<textarea cols="80" rows="5" name="webAlertText"
onkeyup="javascript: update();">
#Trim(document.getAlertDescription())#
</textarea>
</div>

<div>
<label for="webAlertLen">Web Alert Length:</label>
<input type="text" name="webAlertLen" id="webAlertLen" size="4"
readonly="readonly" value="0" />
(Limit: 950)
</div>

...
</form>

The error I get occurs on the first line inside the function, the alert
(...) line. It normally wouldn't be in the function but is there for
debugging.

[jlcox]

Remember that all views get routed through index.cfm, so the
javascript src attribute must be relative to index.cfm, not to the
view page (probably in a subdirectory).

[Teaman]

I have it referenced relative to the web root or "/views/documents/
documents.js" set in an event-arg setting in the config file.
It's finding the file but not the form elements referenced in the
function.

[Teaman]

I found a work around. For some reason the form name handling is
tripping up.

If I use
alert(document.forms['docDetails'].webAlertLen.value);
it works fine. But if I use
alert(document.docDetails.webAlertLen.value);
it throws an error stating that document.docDetails.webAlertLen is
undefined. Go figure.

If anyone knows what's the issue please post.

Sorry for posting what turned out to be a JS issue on this forum but I
was hoping it was a Mach-ii interaction that was causing this that I
wasn't aware of.