JavaScript - IE6 (SP1) throws errors on Microsoft's own page!

P

Philip Herlihy

I traced a javascript error to this line:
document.all("characterCount").innerText = commentTextLength;
This is on a page deep inside an ordering sequence, so it's probably not
worth copying the URL here.

According to my crib-sheet, "document.all" is only valid in the javascript
of IE4 and later. My browser is IE6 (SP1) which qualifies, but the
javascript I have doesn't like it. I also have Frontpage 2002 installed.
Any ideas? I do seem to see a lot of javascript errors, and not just my
own!

Here are the first lines of Javascript on the page, including the offending
line, marked with an added comment on the line before:

------------------------------------

script src="/OMLibrary/script/functionsICS.js"
language="javascript"></script>
<!-- /common head -->
<SCRIPT LANGUAGE="javascript">
<!--
//---------------------------------------------------------
// this function counts up the text in the comment area and
// displays it on the page
//---------------------------------------------------------
function countText()
{
var commentText = document.forms.frmFeedback.commentArea.value;
var commentTextLength = 0;
commentTextLength = commentText.length;
//### marker comment added by OP - see next line ###
document.all("characterCount").innerText = commentTextLength;
if (commentTextLength > 1000)
{
alert('Please limit your comments to 1000 characters.');
document.forms.frmFeedback.commentArea.value =
commentText.substring(0,1000);
countText();
}
return true;
}
 
R

Roland Hall

:
: I traced a javascript error to this line:
: document.all("characterCount").innerText = commentTextLength;
: This is on a page deep inside an ordering sequence, so it's probably not
: worth copying the URL here.
:
: According to my crib-sheet, "document.all" is only valid in the javascript
: of IE4 and later. My browser is IE6 (SP1) which qualifies, but the
: javascript I have doesn't like it. I also have Frontpage 2002 installed.
: Any ideas? I do seem to see a lot of javascript errors, and not just my
: own!
:
: Here are the first lines of Javascript on the page, including the
offending
: line, marked with an added comment on the line before:
:
: ------------------------------------
:
: script src="/OMLibrary/script/functionsICS.js"
: language="javascript"></script>
: <!-- /common head -->
: <SCRIPT LANGUAGE="javascript">
: <!--
: //---------------------------------------------------------
: // this function counts up the text in the comment area and
: // displays it on the page
: //---------------------------------------------------------
: function countText()
: {
: var commentText = document.forms.frmFeedback.commentArea.value;
: var commentTextLength = 0;
: commentTextLength = commentText.length;
: //### marker comment added by OP - see next line ###
: document.all("characterCount").innerText = commentTextLength;
: if (commentTextLength > 1000)
: {
: alert('Please limit your comments to 1000 characters.');
: document.forms.frmFeedback.commentArea.value =
: commentText.substring(0,1000);
: countText();
: }
: return true;
: }

What is the error?

It appears that the line you're referencing is not actually the error.
document.all("characterCount").innerText = commentTextLength;

The error appears to be on the form.

Ex. (this will error out and point to the above line as you experienced)

<div><span name="characterCount"></span><span>&nbsp;characters</div>
<form name=frmFeedback>
<textarea name=commentArea rows=5 cols=50 onkeyup="countText()"></textarea>
</form>

The reason is document.all is trying to reference the element by ID, not
name. So, to make it work, you need to add an ID to the SPAN.

<div><span id=characterCount
name="characterCount"></span><span>&nbsp;characters</div>
<form name=frmFeedback>
<textarea name=commentArea rows=5 cols=50 onkeyup="countText()"></textarea>
</form>

Here is a full working model:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT type="text/javascript" LANGUAGE="javascript">
<!--
//---------------------------------------------------------
// this function counts up the text in the comment area and
// displays it on the page
//---------------------------------------------------------
function countText()
{
var commentText = document.forms.frmFeedback.commentArea.value;
var commentTextLength = 0;
commentTextLength = commentText.length;
//### marker comment added by OP - see next line ###
document.all("characterCount").innerText = commentTextLength;
if (commentTextLength > 1000)
{
alert('Please limit your comments to 1000 characters.');
document.forms.frmFeedback.commentArea.value =
commentText.substring(0,1000);
countText();
}
return true;
}
</script>
</HEAD>
<BODY>
<div><span id=characterCount
name="characterCount"></span><span>&nbsp;characters</div>
<form name=frmFeedback>
<textarea name=commentArea rows=5 cols=50 onkeyup="countText()"></textarea>
</form>
</BODY>
</HTML>

It would have been easier had you supplied the form also. Jes' sayin'...

--
Roland

This information is distributed in the hope that it will be useful, but
without any warranty; without even the implied warranty of merchantability
or fitness for a particular purpose.

-Technet Script Center-
http://www.microsoft.com/technet/treeview/default.asp?url=/technet/scriptcenter/default.asp
-MSDN Library-
http://msdn.microsoft.com/library/default.asp
 
P

Philip Herlihy

Roland Hall wrote:
....
The reason is document.all is trying to reference the element by ID,
not name. So, to make it work, you need to add an ID to the SPAN.
Click to expand...


That's it! Here's the original form code:

<td>
<textarea cols="50" rows="5" style="width:420px;"
onKeyUp="countText()" id="commentArea" name="sFeedbackComment"></textarea>
</td>

And the offending line from function CountText():

document.all("characterCount").innerText = commentTextLength;
Should be:
document.all("commentArea").innerText = commentTextLength;

The error was "document.all("...") is null or not an object. So it's just a
programming error, not something wrong with my setup. Thanks a lot for this
impressive detective work. I note your comment about including the form
code - I'll know next time.


There are 837 lines (mostly JS) on what looks like a simple form! The code
is dynamically generated, as there are order-specific details in there.
 
R

Roland Hall

:
: Roland Hall wrote:
: ...
: > The reason is document.all is trying to reference the element by ID,
: > not name. So, to make it work, you need to add an ID to the SPAN.
:
:
: That's it! Here's the original form code:
:
: <td>
: <textarea cols="50" rows="5" style="width:420px;"
: onKeyUp="countText()" id="commentArea" name="sFeedbackComment"></textarea>
: </td>
:
: And the offending line from function CountText():
:
: document.all("characterCount").innerText = commentTextLength;
: Should be:
: document.all("commentArea").innerText = commentTextLength;
:
: The error was "document.all("...") is null or not an object. So it's just
a
: programming error, not something wrong with my setup. Thanks a lot for
this
: impressive detective work. I note your comment about including the form
: code - I'll know next time.
:
:
: There are 837 lines (mostly JS) on what looks like a simple form! The
code
: is dynamically generated, as there are order-specific details in there.

I believe that might be incorrect. The part of the form or outside the form
that actually gets the value of the character count is what is missing the
ID. I don't think the script is in error. commentArea is the text in the
TEXTAREA. If you assign a value to the innerText of the TEXTAREA, then you
overwrite your input.

I noticed you cross-posted, which is good but you also multi-posted to the
jscript forum. It's not good to multi-post and you'll get the wrath but you
answered both so just as well except better to include the whole discussion
together. I'm just referencing and not pointing fingers as I'm sure it was
an after thought to include the other forum.

In the jscript response you got, Martin said it referenced ID or NAME but
when I tried to reference document.all by name, it didn't work. I'm
wondering what MY error was?! I'll add the jscript forum to this discussion
to see if Martin or someone can elighten us. Note: I thought the same as
Martin until I tested it but I hardly ever, if at all, use the document.all
collection. I prefer to use getElementById, which requires a more updated
browser.

I'm adding part of what I posted so the jscript group can see what I'm
referring to.

Thanks for following up. (O:=

[from earlier response]
The error appears to be on the form.

Ex. (this will error out and point to the above line as you experienced)

<div><span name="characterCount"></span><span>&nbsp;characters</div>
<form name=frmFeedback>
<textarea name=commentArea rows=5 cols=50 onkeyup="countText()"></textarea>
</form>

The reason is document.all is trying to reference the element by ID, not
name. So, to make it work, you need to add an ID to the SPAN.

<div><span id=characterCount
name="characterCount"></span><span>&nbsp;characters</div>
<form name=frmFeedback>
<textarea name=commentArea rows=5 cols=50 onkeyup="countText()"></textarea>
</form>

Here is a full working model:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT type="text/javascript" LANGUAGE="javascript">
<!--
//---------------------------------------------------------
// this function counts up the text in the comment area and
// displays it on the page
//---------------------------------------------------------
function countText()
{
var commentText = document.forms.frmFeedback.commentArea.value;
var commentTextLength = 0;
commentTextLength = commentText.length;
//### marker comment added by OP - see next line ###
document.all("characterCount").innerText = commentTextLength;
if (commentTextLength > 1000)
{
alert('Please limit your comments to 1000 characters.');
document.forms.frmFeedback.commentArea.value =
commentText.substring(0,1000);
countText();
}
return true;
}
</script>
</HEAD>
<BODY>
<div><span id=characterCount
name="characterCount"></span><span>&nbsp;characters</div>
<form name=frmFeedback>
<textarea name=commentArea rows=5 cols=50 onkeyup="countText()"></textarea>
</form>
</BODY>
</HTML>

[eor]

When id=characterCount is removed from the SPAN, the counter doesn't work.

Proof of concept:
http://rockintheplanet.com/lab/allwithoutid.html
http://rockintheplanet.com/lab/allwithid.html

--
Roland

This information is distributed in the hope that it will be useful, but
without any warranty; without even the implied warranty of merchantability
or fitness for a particular purpose.

-Technet Script Center-
http://www.microsoft.com/technet/treeview/default.asp?url=/technet/scriptcenter/default.asp
-MSDN Library-
http://msdn.microsoft.com/library/default.asp
 
M

Martin Honnen

Roland said:
In the jscript response you got, Martin said it referenced ID or NAME but
when I tried to reference document.all by name, it didn't work. I'm
wondering what MY error was?! I'll add the jscript forum to this discussion
to see if Martin or someone can elighten us.
Click to expand...

Well, all the original poster showed in the message I was responding to
was some script code containing
document.all("characterCount").innerText
and saying he got an error
document.all(...) is null or not an object
There was no mentioning at all what kind of HTML element that script
tried to set innerText on (and in my response I didn't even care about
what was happening to the object, I simply tried to explain why
document.all("characterCount").property can yield that error) and in
general document.all looks for elements with a matching name or id, the
only difference being that only elements like <form> or <img> for which
the name attribute is defined are looked for when matching on name.
Try the following:
<html>
<head>
<title>document.all</title>
<script type="text/javascript">
function showDocumentAllResults () {
var text = '';
for (var i = 0; i < arguments.length; i++) {
var arg = arguments;
var elements = document.all[arg];
if (elements) {
if (elements.length) {
text += 'document.all["' + arg + '"].length: ' +
elements.length + '\n';
for (var j = 0; j < elements.length; j++) {
text += 'element ' + j + ': name: ' + elements[j].name
+ '; id: ' + elements[j].id
+ '; tagName: ' + elements[j].tagName + '\n';
}
}
else {
text += 'document.all["' + arg + '"] has name: ' + elements.name
+ '; id: ' + elements.id
+ '; tagName: ' + elements.tagName + '\n';
}
}
else {
text += 'document.all["' + arg + '"] is null.';
}
text += '\n';
}
alert(text);
}
window.onload = function (evt) {
showDocumentAllResults('elementName', 'imageName', 'dummyName');
}
</script>
</head>
<body>
<form name="elementName">
<p name="elementName" id="elementName">
Paragraph.
<img name="imageName" src="kiboInside.gif" alt="">
</p>
<p name="elementName">
Paragraph.
</p>
</form>
</body>
</html>

and you will see that both the <form name="elementName"> and the <p
id="elementName"> are found while <p name="elementName"> is not found.
 
P

Philip Herlihy

Cross-posting seems legitimate in some circumstances, but I acknowledge that
multiposting is annoying. You're right, it was an afterthought - I'd
spotted the "jscript" group after posting. In future, if I ever feel
compelled to do this sort of thing, I'll add a reply just to include the
omitted group. I did, however, attempt to "tidy up" after myself in each
place! I appreciate the courtesy of your correction on this as much as the
technical insight you've brought to my question!
 
P

Philip Herlihy

Thanks for this further insight. I'm (clearly) no great shakes at JS, and I
hadn't grasped that you could declare a SPAN in your HTML and then use it as
a field simply by writing to its "innerText". (I spent ages looking for the
"field" which was displaying the character count in your "Proof of Concept"
example!) It's a paradigm shift for me to be using objects which aren't
explicitly declared. I'm partly appalled and partly intrigued, but I've
"got it", finally! (I hope...)
 
P

Philip Herlihy

Thanks! I'll be sensitive to the distinction between Name and ID in future.

######################
## PH, London ##
######################
 
R

Roland Hall

:
: Thanks for this further insight. I'm (clearly) no great shakes at JS, and
I
: hadn't grasped that you could declare a SPAN in your HTML and then use it
as
: a field simply by writing to its "innerText". (I spent ages looking for
the
: "field" which was displaying the character count in your "Proof of
Concept"
: example!) It's a paradigm shift for me to be using objects which aren't
: explicitly declared. I'm partly appalled and partly intrigued, but I've
: "got it", finally! (I hope...)

Ya', not in the form. Hey, we all learn something daily, IMHO. It took me
awhile to get DIV and SPAN to work the way I wanted. I used to use TABLEs
and now no longer do. I've changed a lot of what I do to support W3C DOM
and XHTML Transitional at least. I use CSS instead of assigning HTML
properties, i.e. background-color (block) backgroundColor (script) instead
of bgcolor. I prefer using ClassNames and switching the className of an
element instead of assigning a style on the fly but I doubt if I have any
hard pressed template overall. I also hardly ever use the <a> (anchor) HTML
tag and prefer to use something similar to:

<div id=calcLink class=calcLink onClick="calcThis()"
onmouseover="window.status='calculate the form';
this.className='calcLinkOver'" onmouseout="window.status='';
this.className='calcLink'">Calculate</div>

The styles associated would at least include:
..calcLink {
font: normal 12pt sans;
background-color: white;
border: 3px outset gray
}
..calcLinkOver {
font: bold 12pt sans;
background-color: #efe;
border: 3px outset gray;
cursor: pointer
}

It may look like more work but I can now use these classes with other links.
I can also make one change in the style block and change that for all my
links. However, if I one to make one a little bit different then I assign
it by ID instead of class.

I think you should use what you're comfortable with and what works with your
target. My target is more for people with updated browser support and I'm
not coding much for wireless trinkets which are quite limited in what they
can view. Some will frown on my approach but I never was very good with
authority. (O:=

RE: NG etiquette. Top post, bottom post, threaded post, whatever. I prefer
to snip where I can and also I prefer to thread but I also will top post.
When someone starts paying for my equipment and time, I'll do it their way.
Until then, pffft!!

*walks away singin'*... you can't please everyone so, ... you gotta' please
yourself...na naaa....na...nananana...na nana naaa......

--
Roland

This information is distributed in the hope that it will be useful, but
without any warranty; without even the implied warranty of merchantability
or fitness for a particular purpose.

-Technet Script Center-
http://www.microsoft.com/technet/treeview/default.asp?url=/technet/scriptcenter/default.asp
-MSDN Library-
http://msdn.microsoft.com/library/default.asp
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

PB : document.write some HTML code with <script src=".."> tags 1
IE6, SP1, and javascript errors 2
On a asp.net page 1
Help with a default page 2

Top