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="RightPoint ingTriangle.gif " onclick="opencl ose(this);">
<span class="title">t itle</span>
<div class="contents ">
Hi. This is the contents.
</div>

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

And this javascript:

function openclose(imgem t)
{
if(imgemt.src.i ndexOf("RightPo intingTriangle. gif") > -1)
{
imgemt.src = "DownRightPoint ingTriangle.gif ";
imgemt.src = "DownPointingTr iangle.gif";
parent = imgemt.parentNo de;
//find the parent of the image element
contents = parent.childNod es[2];
//get the child of that element that is a
//div with the class contents

//alert("contents :" + properties(cont ents));
contents.style. visibility = 'visible';
}
else
{
imgemt.src = "DownRightPoint ingTriangle.gif ";
imgemt.src = "RightPointingT riangle.gif";
parent = imgemt.parentNo de;
//find the parent of the image element
contents = parent.childNod es[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]

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

Rostov wrote on 13 Dec 2003 at Sat, 13 Dec 2003 23:52:39 GMT:
[color=blue]
> 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="RightPoint ingTriangle.gif "
> onclick="opencl ose(this);"> <span
> class="title">t itle</span> <div class="contents ">
> Hi. This is the contents.
> </div>
>
> <div class="children ">
> </div>
> </div>[/color]

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[color=blue]
><img src="RightPoint ingTriangle.gif " onclick="opencl ose(this);"
><span class="title">t itle</span
><div class="contents "
>Hi. This is the contents.</div
><div class="children "
></div
></div>[/color]

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.Winter@blueyo nder.co.invalid (replace ".invalid" with ".uk")