Spoilers!

[Renegade605]

So I've been trying to create an effect for my website pretty much exactly the same as the spoilers available with phpBB. See here.Except I'm having difficulties. I've copied the code for those spoiler boxes and modified it slightly, and it now doesn't work. Here is my code:

<div class="record"><div class="title">	<table>		<tr>			<th>Received a Promotion</th>			<td><input type="button" value="Show Info" onclick="/* Test Command */ alert('Mic Check 1, 2'); var node = this.parentNode.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('div')[1]; /* Test Command */ alert(node.style.display); if (node.style.display != 'inline') { node.style.display = 'inline'; this.value = 'Hide Info'; } else { node.style.display = 'none'; this.value = 'Show Info'; }" /></td>			<td>2008-12-27</td>		</tr>	</table></div><div class="sub">			<!-- THIS ONE -->	<p>Peter Griffen received a promotion to PVT. It was authorised by Mayor West.</p></div></div>

The idea was to make the marked div appear and dissappear (invisible on page load by CSS). However, when I click the button on my page, the first alert ('Mic Check 1, 2') appears, and then nothing happens. I assume this means there is a problem with the part that sets the variable node. Can anyone tell me what is wrong and how to fix it? Thanks.

[jeffman]

Tables are not always what they appear. Many browsers now will generate a <tbody> element even if you don't specify one. Or it could be that having a <th> element coerces the <tbody> element to pop into existence. Anyway, in Firefox at least, you're one parentNode shy of where you need to be, such that this.parentNode.parentNode.parentNode.parentNode.parentNode references <div class="title">, which is one level lower than what you want.But I don't recommend adding another .parentNode to your node identifier just yet. All browsers may not behave the same. One way to ensure they do is to explicitly add a <tbody> tag. Then you might be able to add another .parentNode to your tree-climbing routine.Is there some reason you don't take that huge bunch of code out of the HTML tag and put it in a script? The only reason I can think of for using the node tree (instead of using document.getElementById ) is that you're going to have more than one of these things, and you want the code to work all the same. But THAT is the argument for pulling it out of the tag and creating one generic function to handle all of them.My advice, anyway.

[jesh]

Wow, yeah, at the very least, do as Deirdre's Dad says and move that script out of the element.This:

<input type="button" value="Show Info" onclick="/* a ton of javascript snipped out of here...." />

is a lot harder to understand and debug than this:

<script type="text/javascript">function MyClickyFunction(){	/* Test Command */	alert('Mic Check 1, 2');	var node = this.parentNode.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('div')[1];	/* Test Command */	alert(node.style.display); 	if (node.style.display != 'inline')	{		node.style.display = 'inline';		this.value = 'Hide Info';	}	else	{		node.style.display = 'none';		this.value = 'Show Info';	}}</script><input type="button" value="Show Info" onclick="MyClickyFunction();" />

[justsomeguy]

I'm not sure if that will work exactly right (although it may), I'm not sure if this is going to be set to the window object or the input object. You may need to use call in order to have this refer to the input:<input type="button" value="Show Info" onclick="MyClickyFunction.call(this);" />

[Renegade605]

Thank you, Deirdre's Dad, you were exactly right. FF and IE both interpret a tbody element where there isn't one. I didn't know such a tag even existed...Anyway, as for why I didn't take the script out of the element. The first rule of debug (or my first rule, if no one else's) is that the less you change, the less places you have to look for problems. Because I copied the script from phpBB, I left it as it is there (in the element). Now that it is working I have moved it into the header, and it still works (thanks to justsomeguy). Also, the reason for the node tree is because I will have more than one of these (as output from PHP) and I want them all to work exactly the same way without having to potentially generate 50+ unique element ids. Plus, I didn't know anything about node trees and now I do.Thanks all, another solution for the books.

[jeffman]

Actually, that's the right rule, and you took the correct steps afterward.