I have a javascript that is supposed to make a div appear or disappear depending on whether a form field in an adjacent div is active. As you can see in the code, when the form field in div "username" is selected, div "usernote" should appear. But it's not....any suggestions?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-language" content="en" />
<title>User Registration</title>
<style>
html, body {
color: #000;
background-color: #fff;
font-size:15px;
}
form div.active {
background-color: #F5F5DC;
border: 0px solid #8a8;
}
#username
{
font-family:Arial;
font-weight:bold;
padding-top: 1em;
padding-bottom: 1em;
width:300px;
padding-left:20px;
}
#usernote
{
font-weight: 400;
font-family:Arial;
padding: 0em;
font-size:12px;
width:300px;
}
#user_registration
{
border:1px solid #6495ED;
width:700px;
background-color: #ECF1EF;
margin-left:100px;
}
#user_registration p
{
clear:both;
margin-top:0px;
margin-bottom:0px;
}
</style>
<script type="text/javascript"><!--
function hasClassName(el,c){
c=c.replace(/\-/g,'\\-');
return (new RegExp('(^|\\s)'+c+'(\\s|$)')).test(el.className);
}
function addClassName(el,c){
if(hasClassName(el,c)) return;
var curClass=el.className||'';
el.className=curClass+((curClass.length>0)?' ':'')+c;
}
function removeClassName(el,c){
var re=new RegExp('\\s*'+c.replace(/\-/g,'\\-')+'\\s*');
el.className=el.className.replace(re,' ').replace(/^\s*|\s*$/g,'');
}
function highlightElm(el,light){
if(!el) return;
if(light) addClassName(el,'active');
else removeClassName(el,'active');
}
window.onload = function(){
document.getElementById('field1').onblur = function() {
document.getElementById('usernote').style.display = 'none';
highlightElm(this.parentNode, false);
}
document.getElementById('field1').onfocus = function() {
document.getElementById('usernote').style.display = 'block';
highlightElm(this.parentNode, true);
}
}
// -->
</script>
</head>
<body>
<table>
<form method="post" action="" id="user_registration" name="user_registration">
<tr>
<td>
<div id="username">
Username
<input type="text" id="field1" name="field1" size="30" tabindex="1">
</div>
</td>
<td>
<div id="usernote" style="display:none;">
Your username can only contain letters (A-Z) or numbers (0-9)
</div>
</td>
</tr>
</form>
</table>
</body>
</html>
