AJAX

I just can't get this Javascript

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: May 2004

Posts: 133

Reputation: Kamex is an unknown quantity at this point

Solved Threads: 0

Kamex

Offline

Junior Poster

I just can't get this Javascript

Aug 11th, 2005

I'm familiar with HTML and CSS, and have now started to learn PHP without running into any trouble, but I want to add Javascript to my knowledge. I tried a long time ago, and failed, for the same reason I'm failing now. Code that looks logical to me is not logical in Javascript. Anything I try to make on my own always results in some kind of error, even if it appears to make sense to my warped brain.

What I'm trying to do now should be fairly simple. I'm trying to create a test page with a navbar and a set of links. When the user hovers over the links, the text should change to a discription of that link. I have altered my code a great deal, and have at least accomplished creating the discription (even if the CSS for it is in serious need of adjustment). However, no matter how many different things I try, I cannot get the discription to actually change. Firefox's Javascript console will either give me an error, or nothing will happen at all.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <!--HTML Transitional Javascript Test Page-->
 
	<!--Header Information-->
	<head>
 
		<!--Page's Title-->
		<title>
			Test Page
		</title>
 
		<!--CSS Styling Information-->
		<style>
			/*Class Specific Styling Information*/
			div#navbar
			{
				background-color: #00FF00;
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
			}
 
			div#navLinks
			{
				float: left;
			}
 
			div#linkDescriptions
			{
				background-color: #FFFF88;
				margin: 10px 10px 10px 10px;
				width: 100%;
			}
		</style>
 
		<!--Scripting Information-->
		<script type="text/javascript">
			//Create the Link Discriptions div (Done using Javascript so that it doesn't appear with Javascript disabled).
			function creatediscription()
			{
				var navbar = document.getElementById('navbar')
				var linkDescriptions = document.createElement('div');
				linkDescriptions.id = "linkDescriptions";
				var linkDescriptions_textNode = document.createTextNode('Hover over a menu item for the discription.');
				linkDescriptions.appendChild(linkDescriptions_textNode);
				navbar.appendChild(linkDescriptions);
			}
 
			function changetext()
			{{
				linkDescriptions_textNode.nodeValue = 'Test';
				alert('that aint it');
			}}
		</script>
 
	</head>
 
	<!--Body Information-->
	<body onload="creatediscription();">
		<div id="navbar">
			<div id="navLinks">
				<p>
					<a href="#" onmouseover="changetext();">Main</a>
				</p>
			</div>
		</div>
	</body>
 
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <!--HTML Transitional Javascript Test Page-->

	<!--Header Information-->
	<head>

		<!--Page's Title-->
		<title>
			Test Page
		</title>

		<!--CSS Styling Information-->
		<style>
			/*Class Specific Styling Information*/
			div#navbar
			{
				background-color: #00FF00;
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
			}

			div#navLinks
			{
				float: left;
			}

			div#linkDescriptions
			{
				background-color: #FFFF88;
				margin: 10px 10px 10px 10px;
				width: 100%;
			}
		</style>

		<!--Scripting Information-->
		<script type="text/javascript">
			//Create the Link Discriptions div (Done using Javascript so that it doesn't appear with Javascript disabled).
			function creatediscription()
			{
				var navbar = document.getElementById('navbar')
				var linkDescriptions = document.createElement('div');
				linkDescriptions.id = "linkDescriptions";
				var linkDescriptions_textNode = document.createTextNode('Hover over a menu item for the discription.');
				linkDescriptions.appendChild(linkDescriptions_textNode);
				navbar.appendChild(linkDescriptions);
			}

			function changetext()
			{{
				linkDescriptions_textNode.nodeValue = 'Test';
				alert('that aint it');
			}}
		</script>

	</head>

	<!--Body Information-->
	<body onload="creatediscription();">
		<div id="navbar">
			<div id="navLinks">
				<p>
					<a href="#" onmouseover="changetext();">Main</a>
				</p>
			</div>
		</div>
	</body>

</html>

Despite having syntax highlighting, there must be something seriously wrong in here, because on the second function, I got an error saying there was a missing curly brace even when there was one. So I added a second one, which resulted in a complaint about a missing end brace. After adding a second brace, the error went away, so now I'm stuck with a rather rediculous double-bracketed function.

Note that the alert() is there because I was using it to debug to see if the function was even being called at all. It looks like it isn't, although considering that I have to put two brackets around it to avoid errors, that's not surprising.

I've been puzzling over this code for 2 and a half days now, and I'm ready to call it quits again. Can someone help?

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: I just can't get this Javascript

Aug 11th, 2005

I'm sure a few of us can take a crack at it. However, what you're trying to dol really isn't typical. Hyperlinks should be self-descriptive:

Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<a href="order_processing.php">Complete your order</a>

"Complete your order" describes what the hyperlink does. Now, I can imagine a scenario where you would like to give your users a fuller explanation of what some hyperlinks do. But physically changing the text of the hyperlink isn't a solution I'd consider. I would

1) set aside an "explanation" portion of the page, perhaps as a <div> element.
2) when the user hovers over a link, change the contents of the <div> element to explain what that link does.

or, alternatively, provide a help system that explains each link, and reference it near the links:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
If you're not sure what to do next,
please refer to the <a href="help.html">online help system</a>.
 
If you're not sure what to do next,
please refer to the <a href="help.html">online help system</a>.

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: I just can't get this Javascript

Aug 11th, 2005

The main problem you have is understanding variable scope. When you use the keyword "var" INSIDE A FUNCTION, you are declaring that the variable is local, or scoped to that function. That being the case, your "changetext" function cannot access the objects you create in your "creatediscription" function.

Examine the code I have below, which is what you're trying to achieve, I think. I have removed the "var" keyword, making those objects global in scope.

I've also modified the "changetext" function to use "documentGetElementById" and the "innerHTML" property, to illustrate their use.

Have fun!

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html> <!--HTML Transitional Javascript Test Page-->
 
<!--Header Information-->
<head>
 
<!--Page's Title-->
<title>Test Page</title>
 
<!--CSS Styling Information-->
<style>
/*Class Specific Styling Information*/
div#navbar
{ 
   background-color: #00FF00;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
}
 
div#navLinks
{ 
   float: left;
}
 
div#linkDescriptions
{ 
   background-color: #FFFF88;
   margin: 10px 10px 10px 10px;
   width: 100%;
}
</style>
 
<!--Scripting Information-->
<script type="text/javascript">
//Create the Link Descriptions div.
function createdescription()
{ 
   navbar = document.getElementById('navbar')
   linkDescriptions = document.createElement('div');
   linkDescriptions_textNode = 
     document.createTextNode('Hover over a menu for a description.');
   linkDescriptions.id = "linkDescriptions";
   linkDescriptions.appendChild(linkDescriptions_textNode);
   navbar.appendChild(linkDescriptions);
}
 
function changetext()
{
   document.getElementById("linkDescriptions").innerHTML = "Test.";
}
</script>
 
</head>
 
<!--Body Information-->
<body onload="createdescription();">
<div id="navbar">
  <div id="navLinks">
    <p>
      <a href="#" onmouseover="changetext();">Main</a>
    </p>
  </div>
</div>
</body>
 
</html>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html> <!--HTML Transitional Javascript Test Page-->

<!--Header Information-->
<head>

<!--Page's Title-->
<title>Test Page</title>

<!--CSS Styling Information-->
<style>
/*Class Specific Styling Information*/
div#navbar
{ 
   background-color: #00FF00;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
}

div#navLinks
{ 
   float: left;
}

div#linkDescriptions
{ 
   background-color: #FFFF88;
   margin: 10px 10px 10px 10px;
   width: 100%;
}
</style>

<!--Scripting Information-->
<script type="text/javascript">
//Create the Link Descriptions div.
function createdescription()
{ 
   navbar = document.getElementById('navbar')
   linkDescriptions = document.createElement('div');
   linkDescriptions_textNode = 
     document.createTextNode('Hover over a menu for a description.');
   linkDescriptions.id = "linkDescriptions";
   linkDescriptions.appendChild(linkDescriptions_textNode);
   navbar.appendChild(linkDescriptions);
}

function changetext()
{
   document.getElementById("linkDescriptions").innerHTML = "Test.";
}
</script>

</head>

<!--Body Information-->
<body onload="createdescription();">
<div id="navbar">
  <div id="navLinks">
    <p>
      <a href="#" onmouseover="changetext();">Main</a>
    </p>
  </div>
</div>
</body>

</html>