Failing Function With IF ELSE In It - Why Does It Fail?

I have the following code in one of my pages...
It is supposed to see if any of the INPUT boxes are left EMPTY, and if they are, it should put back the standard text...
Why is this not working (in IE and FF) only sometimes for the name field, but not for the rest...
What is wrong, how have I failed the IF ELSE logic?!?


<!--CHECK FOR EMPTY FIELDS-->
<script>
function FeedbackCheckFields()
{
if (document.getElementById('TheFeeedbackName').value==''){
document.getElementById('TheFeeedbackName').value='your name';
}else if (document.getElementById('TheFeeedbackEmail').value==''){
document.getElementById('TheFeeedbackEmail').value='your email';
}else if (document.getElementById('TheFeedbackCaptha').value==''){
document.getElementById('TheFeedbackCaptha').value='captha answer';
}else if (document.getElementById('TheFeedbackArea').value==''){
document.getElementById('TheFeedbackArea').value='your message';}
}
</script>

<!--START OF FORM--><form ID="TheFeedbackForm" class="" action="#">
<input ID="TheFeeedbackName" class="" type="text" value="your name" style="width:145px;" onclick="FeedbackCheckFields();">
<input ID="TheFeedbackEmail" class="" type="text" value="your email" style="width:145px;" onclick="FeedbackCheckFields();">
<input ID="TheFeedbackCaptha" class="" type="text" value="captha answer" style="width:145px;" onclick="FeedbackCheckFields();">
<textarea ID="TheFeedbackArea" class="" rows="3" cols="" style="overflow:auto; width:145px; height:56px;resize:none;" onclick="FeedbackCheckFields();">
your message</textarea>