Click to See Complete Forum and Search --> : Problems with Javascript and DOM


FruitBatInShade
10-08-2003, 09:00 AM
I'm trying to show/hide <DIV> tags in a javascript. The problem is that the tags that are hidden isn't correct. I guess it may be due to the child/parent relationship.

To replicate
Click on node1
Node 1 should hide Node1.1 but hides itself too!

Any ideas whats wrong?

<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function Hide(node)
{
var oVDiv=document.getElementById(node);
if (oVDiv.style.display == 'none')
{
oVDiv.style.display = '';
}
else
{
oVDiv.style.display = 'none';
}
}
</SCRIPT>

<div id="Main"><Span style="WIDTH:200px;BORDER-TOP-STYLE: outset; BORDER-RIGHT-STYLE: outset; BORDER-LEFT-STYLE: outset; BACKGROUND-COLOR: #ccff66; BORDER-BOTTOM-STYLE: outset"> Top </Span>
<div ID='Root' onClick="Hide('X')">Root
<div id='X' onClick="Hide('Y')" style='LEFT:10px;position:relative'>Node 1
<div id='Y' style='LEFT:20px;position:relative'>Node 1.1</div>
</div>
</div>
</div>
</BODY>
</HTML>

AdamGundry
10-08-2003, 09:16 AM
When you click on node 1, the onclick event fires (hiding node 1.1) but then the onclick event of root fires as well (as it should do, since node 1 is a child of root), which hides node 1. You may be able to prevent the firing of the second onclick event by returning false from the first.

Adam

FruitBatInShade
10-08-2003, 04:01 PM
Thanks adam. Sorry to be a muppet, but as you can probably tell, I'm not a java developer. Any idea how I may able to stop the parent event from firing?
Is it possible to tell which is the user fired event for instance?