PDA

View Full Version : alter content w/o refresh in response to button click event



irongleet
08-19-2009, 11:23 AM
D.I.C Head
**

Joined: 29 Jan, 2009
Posts: 94



Thanked: 1 times
My Contributions

Hello,

I am teaching myself javascript and in the course of my experimentation have run into this roadblock: I want to display a styled navigation bar with a button beneath it. When the button is clicked, an onclick event will be triggered and the response of the browser should be to print the word "test" right beneath the button. However, what actually happens is the page blanks out and the word 'test' appears in the upper left corner of the screen.

I'm hoping someone would be kind enough to fix this code and explain to me where I've gone wrong here.

also, note that the code appears to be in some kind of infinite loop -- in firefox after I hit the button, it never stops loading the page.




<html>
<head>
<title>JavaScript Navanimation Example</title>
<style type="text/css">

#navsite h5 {
display: none;
}

#navsite ul {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}

#navsite ul li {
list-style: none;
margin: 0;
display: inline;
}

#navsite ul li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}

#navsite ul li a:link {
color: #448;
}

#navsite ul li a:visited {
color: #667;
}

#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
color: #000;
background: #AAE;
border-color: #227;
}

/* #navsite ul li a#current {
background: white;
border-bottom: 1px solid white;
} */

</style>
</title>
<script language="JavaScript" type="text/javascript">
function navanimate()
{

document.write("test");
return false;

}
</script>

</head>
<body language="JavaScript" type="text/javascript">
<div id="navsite">
<h5>Site Navigation</h5>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/archives/">Archives</a></li>
<li><a href="/writing/">Writing</a></li>
<li><a href="/speaking/">Speaking</a></li>
<li><a href="/Contact/">Contact</a></li>
</ul>
</div>

<input type="button" name="button" value="Drop Down" onclick="return navanimate()">

</body>
</html>