Displaying Data with Javascript

I am trying to make a page, similar to DW, with a menu bar at the top that loads specific content into the body when the links in the menu bar are clicked. I have read a few things about how to do this using javascript but I cannot seem to get it to work.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml"   xml:lang="en">
<head>
   
    <title>Tennis Shop Database</title>
	
    <link rel="stylesheet"     
        href="stylesheet.css" 
        type="text/css" />
		
	<script type="text/javascript">
	<!--
	function Show_Stuff(Click_Menu) 
	// Function that will swap the display/no display for
	// all content within span tags
	{
		if (Click_Menu.style.display == "none") 
		{
			Click_Menu.style.display = "";
		}
		else 
		{
			Click_Menu.style.display = "none";
		}
	} 
	-->
	</script>  
</head>
<body>
<div id="title"><h1>Tennis Shop
<form id="search" method="get" action="search.php">
	<input type="text" name="search_query" size="20" />
	<input type="submit" value="Search" />
</form></h1></div>
<ul>
   <li><input type="button" value="Home" class="menus" onclick="javascript:Show_Stuff(display1)"></li>
   <li><input type="button" value="Customers" class="menus" onclick="javascript:Show_Stuff(display2)"></li>
   <li><input type="button" value="Stringers" class="menus" onclick="javascript:Show_Stuff(display3)"></li>
   <li><input type="button" value="Stringing Machines" class="menus" onclick="javascript:Show_Stuff(display4)"></li>
   <li><input type="button" value="String Types" class="menus" onclick="javascript:Show_Stuff(display5)"></li>
   <li><input type="button" value="Racquet Types" class="menus" onclick="javascript:Show_Stuff(display6)"></li>
   <li><input type="button" value="Place an Order" class="menus" onclick="javascript:Show_Stuff(display7)"></li>
</ul>
		
<span id="display1">
	<h2 class="headings">This is a Test<h2>
	<p>This is a test. This is a test.</p>
</span>
	
<span id="display2" style="display: none"><h2 class="headings">Page Header<br/><br/><hr/></h2>
	<p class="text"><!--Any text for the page (before tables) goes here--></p>
	
	<!--EXAMPLE CUSTOMER TABLE-->
<table>
<tr>
   <td>1</td>
   <td>John</td>
   <td>Doe</td>
   <td>21 Jump Street<br/>New York, New York 12345</td>
   <td>123-456-7890</td>
   <td>generic@hotmail.com</td>
   <td><input type="button" name="deletebtn" class="buttons" value="Delete" onclick=""<!--Delete--></input></td>
   <td><input type="button" name="editbtn" class="buttons" value="Edit" onclick=""<!--Edit--></input></td>
</tr>
<tr>
   <td>2</td>
   <td>Jame</td>
   <td>Jameson</td>
   <td>123 Abc Road<br/>Boston, MA 54321</td>
   <td>143-652-8421</td>
   <td>names@hello.com</td>
   <td><input type="button" name="deletebtn" class="buttons" value="Delete" onclick=""<!--Delete--></input></td>
   <td><input type="button" name="editbtn" class="buttons" value="Edit" onclick=""<!--Edit--></input></td>
</tr>
</table>
</span>
</body>
</html>

I only have it set up for the first two links. The first one is supposed to display the "test" text and the second one is supposed to display the table listed below. However, when I show the page, the header shows up but the links do not display the proper data.
Also, if this can be changed so the elements in the menu bar are hyperlinks rather than input buttons, that would work out better but I wasn't sure if one would work and the other wouldn't.

rhuffman8

Light Poster

30 posts since Jan 2011

Reputation Points: 10

Solved Threads: 0

1 Year Ago

Try this one.

<!--
	function Show_Stuff(Click_Menu) 
	// Function that will swap the display/no display for
	// all content within span tags
	{
                var content = document.getElementById(Click_Menu);
		if (content.style.display == "none") 
		{
			document.getElementById(Click_Menu).style.display = "block";
		}
		else 
		{
			document.getElementById(Click_Menu).style.display = "none";
		}
	} 
	-->

Zero13

Practically a Master Poster

624 posts since Jan 2009

Reputation Points: 120

Solved Threads: 139

1 Year Ago

I could not get this code to work either. I'm not sure if the code lies in the javascript or somewhere in my HTML. I saw the original javascript function work on the example site I was trying to adapt it from, I just can't get it to work for my specific example.

rhuffman8

Light Poster

30 posts since Jan 2011

Reputation Points: 10

Solved Threads: 0

1 Year Ago

<ul>
   <li><input type="button" value="Home" class="menus" onclick="javascript:Show_Stuff(display1)"></li>
   <li><input type="button" value="Customers" class="menus" onclick="javascript:Show_Stuff(display2)"></li>
   <li><input type="button" value="Stringers" class="menus" onclick="javascript:Show_Stuff(display3)"></li>
   <li><input type="button" value="Stringing Machines" class="menus" onclick="javascript:Show_Stuff(display4)"></li>
   <li><input type="button" value="String Types" class="menus" onclick="javascript:Show_Stuff(display5)"></li>
   <li><input type="button" value="Racquet Types" class="menus" onclick="javascript:Show_Stuff(display6)"></li>
   <li><input type="button" value="Place an Order" class="menus" onclick="javascript:Show_Stuff(display7)"></li>
</ul>

Argument must be quoted, like this one onclick="javascript:Show_Stuff('displayx')"

Zero13

Practically a Master Poster

624 posts since Jan 2009

Reputation Points: 120

Solved Threads: 139

1 Year Ago

that was it. thanks!

rhuffman8

Light Poster

30 posts since Jan 2011

Reputation Points: 10

Solved Threads: 0

This question has already been solved

You