[debeth]

I am trying to do a simlpe show when the link is clicked.

my function is this

function show(link)
{
	about = document.getElementById('about');
	members = document.getElementById('members');
	team=document.getElementById('team');
	minutes=document.getElementById('minutes');
	docs=document.getElementById('docs');
	
	 
	//<!--				
//	if (link == 'about')
//	{
//		about.style.display= " ";
//		members.style.display = "none";
//		team.style.display="none";
//		minutes.style.display="none";
//		docs.style.display="none";-->
	
	
	if (link == 'Members')
	{
		about.style.display= "none ";
		members.style.display = " ";
		team.style.display="none";
		minutes.style.display="none";
		docs.style.display="none";

	}
	
	if (link == 'Team Project')
	{
		about.style.display= "none ";
		members.style.display = "none";
		team.style.display=" ";
		minutes.style.display="none";
		docs.style.display="none";

	}
	if (link == 'Meeting Minutes')
	{
		about.style.display= "none ";
		members.style.display = "none";
		team.style.display=" none";
		minutes.style.display=" ";
		docs.style.display="none";

	}
	
	if (link == 'Documentation')
	{
		about.style.display= "none ";
		members.style.display = "none";
		team.style.display="none ";
		minutes.style.display="none";
		docs.style.display=" ";

	}
	

}

these are my tags

	<td bgcolor="#FF9900"  ><a href="#members" onclick="show('members')">Members</a></td>
				<td   bgcolor="#FF6600"><a href="#team" onclick="show('team')">Team Project</a></td>
				<td  bgcolor="#FF3300"><a href="#minutes" onclick="show('minutes')">Meeting Minutes</a></td>
				<td  bgcolor="#FF0000" ><a href="#docs" onclick="show('docs')">Documentation</a></td>

i think i am missing the actuall value that i pass to show...but i not sure

the link==(here i am not sure here )

is this where my mistake is

[Martyr2]

Ok, first of all Javascript is case sensitive. So you pass the word 'members' to the function and the if (link == 'Members') is going to fail because it is a capital M you are using there.

Secondly, you set the display style to space which is wrong. Either it is to be assigned an empty string, or better yet, the word "block" if you wish to show it. So here is an example of your members test...

// If the value you passed was 'members' with lowercase 'm'...

if (link == 'members')
{
		about.style.display= "none ";
		members.style.display = "block";
		team.style.display="none";
		minutes.style.display="none";
		docs.style.display="none";

}

Third, make sure the word you pass to the function is the word you are actually checking against in the if statements. For instance you pass the word "team" to the function but you test for "Team Project" in the if statement. This won't work. Either you have to test for "team" or you have to change the word you pass to the function show().

So if you fix up your tests to take the case sensitivity into account and also set the display (for the item you want to show) to either an empty string (not space) or the word "block" then you should see your script start working as expected.

Hope these make sense for you.

"At DIC we be word matching code ninjas... DIC master match the word 'kickass' 100% of the time. We know it as the law of DIC."

[debeth]

okay i cleaned it up...matched case

if (link == 'members')
	{
		about.style.display= "none";
		members.style.display = "block";
		team.style.display="none";
		minutes.style.display="none";
		docs.style.display="none";

	}

this is the tags for the anchor

<td bgcolor="#FF9900"  ><a href="#" onclick="show('members')">Members</a></td>

it is still not running.....
i getting cross eyes looking at it.

maybe it in the members tag
this is for my table that i want to show

<table width="80%" border="2" cellpadding="2" id="members" style="display: none;" >

am i missing a semi colon or something...its got to be close..
in the function show() im using the word link ...is this right?

Martyr2, on 19 Sep, 2009 - 11:33 AM, said:

Ok, first of all Javascript is case sensitive. So you pass the word 'members' to the function and the if (link == 'Members') is going to fail because it is a capital M you are using there.

Secondly, you set the display style to space which is wrong. Either it is to be assigned an empty string, or better yet, the word "block" if you wish to show it. So here is an example of your members test...

// If the value you passed was 'members' with lowercase 'm'...

if (link == 'members')
{
		about.style.display= "none ";
		members.style.display = "block";
		team.style.display="none";
		minutes.style.display="none";
		docs.style.display="none";

}

Third, make sure the word you pass to the function is the word you are actually checking against in the if statements. For instance you pass the word "team" to the function but you test for "Team Project" in the if statement. This won't work. Either you have to test for "team" or you have to change the word you pass to the function show().

So if you fix up your tests to take the case sensitivity into account and also set the display (for the item you want to show) to either an empty string (not space) or the word "block" then you should see your script start working as expected.

Hope these make sense for you.

"At DIC we be word matching code ninjas... DIC master match the word 'kickass' 100% of the time. We know it as the law of DIC."

[debeth]

any one got an ideas...i will show more code if needed!!!

[Christopher Elison]

If you attach all your code for what you're trying to do and explain what you want it to do I will have a look, because I'm nice like that

[debeth]

i am trying to have the tables show in a reading pane when you click on the links...
here is my page

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--the following page is made by the softeng12 team for Software Eng class ITEC at Radford University-->
<title>Developer Quatro Home</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript"  src="readingpane.js"></script>

</head>

<body>

 <div id="header">

<p><img src="cinco.gif" width="75" height="69" alt="icon" />Developer Quatro U<img src="cinco.gif" width="75" height="69" alt="icon" /></p>

   
 
</div>
 <!--end header-->
<div id="menu"> 
<table  height="50px"width="100%" >
			<tr>
				<td bgcolor="#FF9900"  ><a href="#" onclick="show('members')">Members</a></td>
				<td   bgcolor="#FF6600"><a href="#" onclick="show('team')">Team Project</a></td>
				<td  bgcolor="#FF3300"><a href="#" onclick="show('minutes')">Meeting Minutes</a></td>
				<td  bgcolor="#FF0000" ><a href="#" onclick="show('docs')">Documentation</a></td>
			</tr>
		</table>
		</div><!--end menutable-->
		
		<!--this is main table-->
<table width="100%" border="2" cellpadding="2">
  <tr valign="top">
	<td width="25%" height="650" scope="col">logo will go here</td>
	<!--this is where thw pane is-->
	<td bgcolor="#999999" width="75%" id="pane" align="center" >  
	<!--about-->
  <table width="80%" height="206" border="2" cellpadding="2" bgcolor="#CCCCCC" id="about"  >
  <tr >
	<th colspan="3"scope="col">ABOUT</th>
	
  </tr>
  <tr>
	<td>here put about us<br/><span style="font-size:36px">UNDER CONSTRUCTION</span></td>
	
  </tr>
</table><!--end about-->



<!---members Table-->
<table width="80%" border="2" cellpadding="2" id="members" style="display: none;"	>
  <tr>
	<th scope="col"> </th>
	<th scope="col"> </th>
	<th scope="col"> </th>
	<th scope="col"> </th>
  </tr>
  <tr>
	<td> </td>
	<td> </td>
	<td> </td>
	<td> </td>
  </tr>
</table><!--end members-->

<!--TEAMtable-->
<table width="100%" border="2" cellpadding="2" id="team" bgcolor="#CC0033" style="display: none;"  >
  <tr>
	<th scope="col"> </th>
	<th scope="col"> </th>
	<th scope="col"> </th>
  </tr>
  <tr>
	<td> </td>
	<td> </td>
	<td> </td>
  </tr>
</table><!---end team-->

<!--minutes-->
<table width="100%" border="2" cellpadding="2" bgcolor="#000066" id="minutes" style="display:none;" >
  <tr>
	<th scope="col"> </th>
	<th scope="col"> </th>
	<th scope="col"> </th>
  </tr>
  <tr>
	<td> </td>
	<td> </td>
	<td> </td>
  </tr>
</table><!--end minutes-->

<!--docs table-->
<table width="100%" border="2" cellpadding="2" bgcolor="#99FFCC" id="docs" style="display:none">
  <tr>
	<th scope="col"> </th>
	<th scope="col"> </th>
	<th scope="col"> </th>
  </tr>
  <tr>
	<td> </td>
	<td> </td>
	<td> </td>
  </tr>
</table>

reading pane here</td><!--end ofpane space-->
</table><!--end of maintable-->
  

</body>
</html>

and here is my script

// Javascript Document
//developer quatro u  code for radford soft eng class
//to show tables in reading pane
//function readingPane()
//{ dom=document.getElementById("members").style;

//if (dom.visibility=="visible")
	//dom.visibility="hidden";
	//else
	//dom.visibility="visible";
//}//end function reading pane


function show(link)
{
	about = document.getElementById('about');
	members = document.getElementById('members');
	team=document.getElementById('team');
	minutes=document.getElementById('minutes');
	docs=document.getElementById('docs');
	
	 
	//<!--				
//	if (link == 'about')
//	{
//		about.style.display= " ";
//		members.style.display = "none";
//		team.style.display="none";
//		minutes.style.display="none";
//		docs.style.display="none";-->
	
	
	if (link == 'members')
	{
		about.style.display= "none";
		members.style.display = "";
		team.style.display="none";
		minutes.style.display="none";
		docs.style.display="none";

	}
	
	if (link == 'team')
	{
		about.style.display= "none";
		members.style.display = "none";
		team.style.display="block";
		minutes.style.display="none";
		docs.style.display="none";

	}
	if (link == 'minutes')
	{
		about.style.display= "none";
		members.style.display = "none";
		team.style.display=" none";
		minutes.style.display="block";
		docs.style.display="none";

	}
	
	if (link == 'docs')
	{
		about.style.display= "none";
		members.style.display = "none";
		team.style.display="none";
		minutes.style.display="none";
		docs.style.display="block";

	}
	

}

i have been looking at this a long time and just can't see why it will not work

[forest51690]

In the beginning of your function, you ask it to get elements with ids:

about = document.getElementById('about');
members = document.getElementById('members');
team=document.getElementById('team');
minutes=document.getElementById('minutes');
docs=document.getElementById('docs');

But the HTML tags don't have ids assigned to them. Here is what you need to have:

<td bgcolor="#FF9900"  ><a href="#members" id="members" onclick="show('members')">Members</a></td>

and so on. If this doesn't do what you're expecting, then try putting the id attribute in the td tag

[debeth]

i have tries the suggestion and it does not work. I am passing the elementid 'members' which is the table id that i want to show when the link is clicked. Those ids are in the table.

I tried giving an id to the <a> and using that . but it did not work also put an id in td but know..

I THINK ITS HERE in this part if (link == 'members')..members is the table..not the link..what should the link == ?

[Christopher Elison]

Debeth, I've just tried your code and it seems to work for me in Firefox... oh hang on, it doesn't in Internet Explorer... let's see now...

Ok I have mercilessly edited your code and now have it working on both IE and Firefox, first of all, the fixed HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<!--the following page is made by the softeng12 team for Software Eng class ITEC at Radford University-->
		<title>Developer Quatro Home</title>
		<link href="style.css" rel="stylesheet" type="text/css"/>
		<script type="text/javascript" src="readingpane.js"></script>
	</head>
	<body>
		<div id="header">
			<p>
				<img src="cinco.gif" width="75" height="69" alt="icon" />Developer Quatro U
				<img src="cinco.gif" width="75" height="69" alt="icon" />
			</p>
		</div>
		<!--end header-->
		<div id="menu">
			<table  height="50px"width="100%" >
				<tr>
					<td bgcolor="#FF9900"><a href="#" onclick='show("members")'>Members</a></td>
					<td bgcolor="#FF6600"><a href="#" onclick='show("team")'>Team Project</a></td>
					<td bgcolor="#FF3300"><a href="#" onclick='show("minutes")'>Meeting Minutes</a></td>
					<td bgcolor="#FF0000"><a href="#" onclick='show("docs")'>Documentation</a></td>
				</tr>
			</table>
		</div><!--end menutable-->
       
    <!--this is main table-->
		<table width="100%" border="2" cellpadding="2">
			<tr valign="top">
				<td width="25%" height="650" scope="col">logo will go here</td>
				<!--this is where thw pane is-->
				<td bgcolor="#999999" width="75%" id="pane" align="center" >  
				<!--about-->
				<table width="80%" height="206" border="2" cellpadding="2" bgcolor="#CCCCCC" id="about"  >
					<tr>
						<th colspan="3"scope="col">ABOUT</th>
					</tr>
					<tr>
						<td>here put about us<br/><span style="font-size:36px">UNDER CONSTRUCTION</span></td>
					</tr>
				</table><!--end about-->



<!---members Table-->
<table width="80%" border="2" cellpadding="2" id="members" style="display: none;"    >
  <tr>
    <th scope="col"> </th>
    <th scope="col"> </th>
    <th scope="col"> </th>
    <th scope="col"> </th>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table><!--end members-->

<!--TEAMtable-->
<table width="100%" border="2" cellpadding="2" id="team" bgcolor="#CC0033" style="display: none;"  >
  <tr>
    <th scope="col"> </th>
    <th scope="col"> </th>
    <th scope="col"> </th>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table><!---end team-->

<!--minutes-->
<table width="100%" border="2" cellpadding="2" bgcolor="#000066" id="minutes" style="display:none;" >
  <tr>
    <th scope="col"> </th>
    <th scope="col"> </th>
    <th scope="col"> </th>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table><!--end minutes-->

<!--docs table-->
<table width="100%" border="2" cellpadding="2" bgcolor="#99FFCC" id="docs" style="display:none">
  <tr>
    <th scope="col"> </th>
    <th scope="col"> </th>
    <th scope="col"> </th>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

reading pane here</td><!--end ofpane space-->
</table><!--end of maintable-->
 
</body>
</html>

And now the fixed .js script:

// Javascript Document
//developer quatro u  code for radford soft eng class
//to show tables in reading pane

function show(link) {
    if (link == "members") {
        document.getElementById("about").style.display   = "none";
        document.getElementById("members").style.display = "block";
        document.getElementById("team").style.display    = "none";
        document.getElementById("minutes").style.display = "none";
        document.getElementById("docs").style.display    = "none";
    }
   
    if (link == "team") {
        document.getElementById("about").style.display   = "none";
        document.getElementById("members").style.display = "none";
        document.getElementById("team").style.display    = "block";
        document.getElementById("minutes").style.display = "none";
        document.getElementById("docs").style.display    = "none";
    }
		
    if (link == "minutes") {
        document.getElementById("about").style.display   = "none";
        document.getElementById("members").style.display = "none";
        document.getElementById("team").style.display    = "none";
        document.getElementById("minutes").style.display = "block";
        document.getElementById("docs").style.display    = "none";
    }
   
    if (link == "docs") {
        document.getElementById("about").style.display   = "none";
        document.getElementById("members").style.display = "none";
        document.getElementById("team").style.display    = "none";
        document.getElementById("minutes").style.display = "none";
        document.getElementById("docs").style.display    = "block";
    }
}

Please thumb me up if this was helpful

This post has been edited by Christopher Elison: 20 September 2009 - 06:31 AM

[debeth]

that did it my browser was not reading the original code.. I know that this was simple and i was all around it that you guys for all the help!!!