onclick show

onclick will not display

Page 1 of 1

9 Replies - 1814 Views - Last Post: 20 September 2009 - 07:06 PM

#1 debeth  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 50
  • Joined: 07-July 08

onclick show

Posted 19 September 2009 - 11:30 AM

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

Is This A Good Question/Topic? 0
  • +

Replies To: onclick show

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4332
  • View blog
  • Posts: 12,127
  • Joined: 18-April 07

Re: onclick show

Posted 19 September 2009 - 12:33 PM

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." :snap:
Was This Post Helpful? 0
  • +
  • -

#3 debeth  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 50
  • Joined: 07-July 08

Re: onclick show

Posted 19 September 2009 - 01:18 PM

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?







View PostMartyr2, 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." :snap:

Was This Post Helpful? 0
  • +
  • -

#4 debeth  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 50
  • Joined: 07-July 08

Re: onclick show

Posted 19 September 2009 - 07:03 PM

any one got an ideas...i will show more code if needed!!!
Was This Post Helpful? 0
  • +
  • -

#5 Christopher Elison  Icon User is offline

  • D.I.C Head

Reputation: 39
  • View blog
  • Posts: 230
  • Joined: 29-December 08

Re: onclick show

Posted 19 September 2009 - 07:09 PM

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 :)
Was This Post Helpful? 0
  • +
  • -

#6 debeth  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 50
  • Joined: 07-July 08

Re: onclick show

Posted 19 September 2009 - 09:23 PM

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
Was This Post Helpful? 0
  • +
  • -

#7 forest51690  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 58
  • View blog
  • Posts: 340
  • Joined: 20-March 09

Re: onclick show

Posted 19 September 2009 - 09:27 PM

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
Was This Post Helpful? 0
  • +
  • -

#8 debeth  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 50
  • Joined: 07-July 08

Re: onclick show

Posted 20 September 2009 - 06:05 AM

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 == ?
Was This Post Helpful? 0
  • +
  • -

#9 Christopher Elison  Icon User is offline

  • D.I.C Head

Reputation: 39
  • View blog
  • Posts: 230
  • Joined: 29-December 08

Re: onclick show

Posted 20 September 2009 - 06:29 AM

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 :D

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

Was This Post Helpful? 1
  • +
  • -

#10 debeth  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 50
  • Joined: 07-July 08

Re: onclick show

Posted 20 September 2009 - 07:06 PM

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!!!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1