469,903 Members | 1,661 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,903 developers. It's quick & easy.

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

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
Jul 20 '05 #1
1 1728
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")
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

8 posts views Thread by Shock | last post: by
8 posts views Thread by rdlebreton | last post: by
1 post views Thread by Andrew | last post: by
5 posts views Thread by Martin Chen | last post: by
2 posts views Thread by verci | last post: by
1 post views Thread by Waqarahmed | last post: by
reply views Thread by Salome Sato | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.