Problem with DOM script (Error: contents.style has no properties)

[Rostov]

I've got a script where I'm trying to toggle the visibility of a div
node by a click on an image that is the sibling of the div.

So I've got this HTML:

<div>
<img src="RightPointingTriangle.gif" onclick="openclose(this);">
<span class="title">title</span>
<div class="contents">
Hi. This is the contents.
</div>

<div class="children">
</div>
</div>

And this javascript:

function openclose(imgemt)
{
if(imgemt.src.indexOf("RightPointingTriangle.gif") > -1)
{
imgemt.src = "DownRightPointingTriangle.gif";
imgemt.src = "DownPointingTriangle.gif";
parent = imgemt.parentNode;
//find the parent of the image element
contents = parent.childNodes[2];
//get the child of that element that is a
//div with the class contents

//alert("contents :" + properties(contents));
contents.style.visibility = 'visible';
}
else
{
imgemt.src = "DownRightPointingTriangle.gif";
imgemt.src = "RightPointingTriangle.gif";
parent = imgemt.parentNode;
//find the parent of the image element
contents = parent.childNodes[2];
//get the child of that element that
//is a div with the class contents

alert("contents :" + contents);
contents.style.visibility = 'hidden';
}
}
The problem I'm seeing seems to be that when I try to set
contents.style.visibility to 'visible' or 'hidden', I get
the following error:

Error: contents.style has no properties
Source File: http://weston.canncentral.org/misc/sheesh/test.html
Line: 16

Why would this be the case, and how could I fix it?

The test page is viewable on the net, by the way, at:

http://weston.canncentral.org/misc/sheesh/test.html

[Michael Winter]

Rostov wrote on 13 Dec 2003 at Sat, 13 Dec 2003 23:52:39 GMT:

I've got a script where I'm trying to toggle the visibility of a
div node by a click on an image that is the sibling of the div.

So I've got this HTML:

<div>
<img src="RightPointingTriangle.gif"
onclick="openclose(this);"> <span
class="title">title</span> <div class="contents">
Hi. This is the contents.
</div>

<div class="children">
</div>
</div>
You're not getting the correct node. Using your hosted (not posted)
code: in IE, the fifth child (index 4) is the contents class DIV, and
it's the sixth (index 5) in Opera. Browsers interpret the whitespace
between elements differently. You'll either have to find another way
to walk through the tree, use IDs, or restructure you HTML to:

<div<img src="RightPointingTriangle.gif" onclick="openclose(this);"
<span class="title">title</span
<div class="contents"
Hi. This is the contents.</div
<div class="children"
</div
</div>

This way, there's no white-space between elements, so the contents
class DIV is the third child (index 2) in both IE and Opera. However,
the HTML isn't as easy to read[1].

Mike
[1] I sometimes resort to this, though more limited in scope, when
style sheets render rogue highlights, text decoration and such.

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk")