Javascript Form (Made recomended changes yet not working) - php

Question

Hi read the changes recommended to make from previous post yet i cant see the JS working and i have no errors could somebody please tell me where im going wrong ? thanks
This example scenario changes the color of the text when the user has not inputted enough characters or too many characters i was also wondering if it would be possible to change the color of the text box to red also.
<script type="text/javascript">
function checkForm()
{
var username = document.getElementsById('username').value;
if(username.length<5)
{
alert("Username is to short");
return false;
}
else if (username.lenght<16)
{
alert("Username is to long");
return false;
}
else
{
return true;
}
}
function checkUsername()
{
var username = document.getElementsById('username').value;
var element = document.getElementsById('username1');
if(username.lenght<5)
{
element.innerHTML = "Username is to short";
element.style.color = "red";
}
else if (username.lenght>16)
{
element.innerHTML = "Username is to long";
element.style.color = "red";
}
else
{
element.innerHTML = "Valid Username";
element.style.color = "green";
}
}
</script>
<p><b><h3>Welcome User Please Register</h3></b></p>
<form action="registerUserProcess.php" id="registerUserForm" method="post" name="registerUserForm" onSubmit='return checkForm();'>
<table>
<tr><td><label id="username1">Username</label></td><td><input id="username" type="text" size="16" onBlur='checkUsername();'/></td></tr>

Answer 1

Problem is with your labels. When you call document.getElementById('username'), js searches the document for id == username and it finds a label, not a textfield. Switch your label id to sth like label_username and add id='username' to you input definition.