getElementById problem

[GarryJones]

I am trying to hide text inside <tr> and <td> tags until a link is
clicked.

The following code example reveals the hidden text before the link is
clicked. Can anyone point me in the right direction so I can prevent
this? Note that this code works if the table, tr and td tags are
removed (but this is only an exert of code and I need to get this to
work within a table).

<script type="text/javascript" language="JavaScript">
function showtest1() {
document.getElementById("test1").style.display = "inline";
}

</script>

<table>

<div>
<tr><td>
<a href="javascript:showtest1();" onClick="return true;">
Click here to see hidden text</a>
</td></tr>
</div>

<div id="test1" style="display: none" >
<tr><td>Hidden text</td></tr>
</div>

</table>

Any help greatly appreciated

Garry Jones
Sweden

 

[Evertjan.]

GarryJones wrote on 23 sep 2007 in comp.lang.javascript:

I am trying to hide text inside <tr> and <td> tags until a link is
clicked.

The following code example reveals the hidden text before the link is
clicked. Can anyone point me in the right direction so I can prevent
this? Note that this code works if the table, tr and td tags are
removed (but this is only an exert of code and I need to get this to
work within a table).

<script type="text/javascript" language="JavaScript">

Donot use language="JavaScript" in this century.

function showtest1() {
document.getElementById("test1").style.display = "inline";
}

</script>

<table>

<div>
<tr><td>
<a href="javascript:showtest1();" onClick="return true;">

onClick="return true;" does not add anything, leave it out.

however, using a link to do javascript is bad habit IMHO,
use a button or simple text in a container,

Click here to see hidden text</a>
</td></tr>
</div>

<div id="test1" style="display: none" >
<tr><td>Hidden text</td></tr>
</div>

You cannot/shouldnot use <div>s inside a table

</table>

Try this:

=======================
<script type='text/javascript'>
function showtest1() {
document.getElementById('test1').style.display = 'block';
}
</script>

<table border=1>
<tr><td onClick='showtest1();'>
Click here to see hidden text
</td></tr>
<tr><td id='test1' style='display:none;'>
Hidden text
</td></tr>
</table>
=======================