Member Avatar for Kamex

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.

<!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?

  • 2 Contributors
  • 3 Replies
  • 201 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by tgreer

Recommended Answers

All 3 Replies

Member Avatar for tgreer

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:

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

If you're not sure what to do next,
please refer to the <a href="help.html">online help system</a>.
Member Avatar for tgreer

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!

<!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>
Member Avatar for tgreer

You never followed-up. Did you my post make sense? How are your JavaScript efforts going?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.