By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,712 Members | 2,116 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,712 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Share this Question
Share on Google+
1 Reply


P: n/a
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.