Onclick handler picking up second click on tag. Why?

[garey]

Hello -

I have written a small table of contents manager. If an entry has
sub-entries, it has a plus in front of it. If the user clicks on the
plus, the sub-entries are displayed. The table of contents is
displayed in one frame and the pages of the document in the other.
Clicking on a table of contents entry redraws the image in the page
frame.

In order to implement this I have the following structure

<div>
<div id="anch0" class="level0">
<span id="exp0" class="plus" onClick="exp_col('exp0');"
onMouseOver="this.style.cursor = 'pointer';">+</span> 
<a href="link?TOCCHOICE=0" target="RIGHT_FRAME"></a>
<div class="expandable">
<div id="anch1" class="level1">
<span id="exp1" class="plus" onClick="exp_col('exp1');"
onMouseOver="this.style.cursor = 'pointer';">+</span> 
<a href="link?TOCCHOICE=1" target="RIGHT_FRAME"></a>
<div class="expandable">
<div id="anch2" class="level2"><a href="link?TOCCHOICE=2"
target="RIGHT_FRAME"></a></div>
<div id="anch3" class="level2">
<a href="link?TOCCHOICE=3" target="RIGHT_FRAME"></a></div>
....

(I've substituted the word 'link' for the actual links used in the
app, and I've taken out the a tag contents.).

If the span contains a plus, the exp_col function just looks at
the children of the span's parent, finds the expandable one, and sets
its display style to 'block'. It also sets the spans content and class
to 'minus'. Clicking on a minus reverses the process.

My problem is that the first time that I click on a span tag,
nothing happens. If I click again, everything works as advertised. The
first click continues to work until the page is refreshed.

Any ideas what's happening?

Garey Mills

 

[RobG]

Hello -

I have written a small table of contents manager.

It's very difficult to debug code you can't see. Since you posted
HTML only, you seem to think it's an HTML problem. In that case, you
might want to ask in an HTML forum:

comp.infosystems.www.authoring.html
<URL: http://groups.google.com.au/group/
comp.infosystems.www.authoring.html?lnk=li >

If an entry has
sub-entries, it has a plus in front of it. If the user clicks on the
plus, the sub-entries are displayed. The table of contents is
displayed in one frame and the pages of the document in the other.
Clicking on a table of contents entry redraws the image in the page
frame.

There are hundreds, if not thousands of such menus already written,
consider finding one you like and copying it.

In order to implement this I have the following structure

<div>
<div id="anch0" class="level0">
<span id="exp0" class="plus" onClick="exp_col('exp0');"

You seem to be passing the ID of the element to the exp_col()
function, which you then probably pass to getElementById. Consider:

<span ... onClick="exp_col(this);"

Now you don't care what the ID is and don't waste resources getting a
reference back to the element that called the function.

onMouseOver="this.style.cursor = 'pointer';">+</span> 

The cursor style should be set in CSS, not using script. This will
set the cursor every time the element mouseover event fires, but will
have zero practical effect after the first time and is no different to
setting it permanently in the CSS other than script disabled/incapable
browsers will show the effect too.

<a href="link?TOCCHOICE=0" target="RIGHT_FRAME"></a>
<div class="expandable">
<div id="anch1" class="level1">
<span id="exp1" class="plus" onClick="exp_col('exp1');"
onMouseOver="this.style.cursor = 'pointer';">+</span> 
<a href="link?TOCCHOICE=1" target="RIGHT_FRAME"></a>
<div class="expandable">

You seem to be missing closing tags for the div elements. You should
post code that can be copied and pasted into a page and "works" to the
extent that it illustrates the issue.

<div id="anch2" class="level2"><a href="link?TOCCHOICE=2"
target="RIGHT_FRAME"></a></div>
<div id="anch3" class="level2">
<a href="link?TOCCHOICE=3" target="RIGHT_FRAME"></a></div>
...

(I've substituted the word 'link' for the actual links used in the
app, and I've taken out the a tag contents.).

You can use CSS to do the + and - thing with images by changing the
class of the element, there are many examples of how to add/remove
class values in the archives and various free libraries. Search for
"add remove class name".

If the span contains a plus, the exp_col function just looks at
the children of the span's parent, finds the expandable one, and sets
its display style to 'block'.

Since they are divs, better to toggle between '' (empty string) and
'none'.

It also sets the spans content and class
to 'minus'. Clicking on a minus reverses the process.

My problem is that the first time that I click on a span tag,
nothing happens. If I click again, everything works as advertised. The
first click continues to work until the page is refreshed.

Any ideas what's happening?

Invisible code is hard to debug.