jQuery variable always evaluates to 'undefined'
<p>I am trying something like:</p>

<pre><code>var usernameDone = false;
/*Some application logic*/
alert(usernameDone);
</code></pre>

<p>This is always evaluating to <code>undefined</code>. However, if I change the variable name from <code>usernameDone</code> to anything else, even <code>usrnameDone</code>, the script works fine. Does <code>usernameDone</code> conflict with jQuery? If not, then why does it happen?</p>

<p>(I am testing on Chrome with jQuery-1.6.1 currently and have not tried other browsers.)</p>

<p><strong>[Update]</strong><br>
The variable evaluates to <code>undefined</code> even if the application logic is eliminated.</p>

<p><strong>[Update-2 The full code]</strong><br>
I have marked the usage using <code>//</code> comments</p>

<pre><code> $('document').ready( function() {

/**
 * The following set manages the effects for the login menu. The effects including highlighting
 * the login box when focused, showing guidance through a pop-up menu and handling transformation
 * through fade effects.
 * 
 */
var usernameDone = false;      //Declared here
/**
 * @function login-box focus()
 * Handles the onFocus() effects of the login box and displays the initial guidance pop-up box.
 * 
 */

$('#login-box').focus( function() {

/**
 * Color change effect of the login box
 */

    $(this).css('background-color' , '#000');
    $(this).css('color' , '#FFF');
    $(this).css('border' , '2px solid #000');

/**
 * Fade in effect of the login guide
 */

    $('#login-guide').fadeIn(1200);
    $('#login-guide-triangle').fadeIn(1200);

});


/**
 * @function login-box focusout()
 * Handles the focusOut effects of the login box and hides the guidance pop-up box.
 * 
 */

$('#login-box').focusout( function() {

/**
 * Color change effects of the login box
 */

    $(this).css('background-color' , '#FFF');
    $(this).css('color' , '#000');
    $(this).css('border' , '3px solid #000');

/**
 * Fade out effect of the login guide
 */

    $('#login-guide').fadeOut(1200);
    $('#login-guide-triangle').fadeOut(1200);
});

/**
 * @function login-box bind(keypress)
 * Handles the progression of the login steps. Specifically, what state the login box is in 
 * (ie, username or password) and how to respond when the state change key ('return/enter key')
 * is pressed.
 * 
 */

$('#login-box').bind('keypress' , function(e) {
/**
 * Checks for the current state (using usernameDone) if not, then registers the current username
 * changes the state to username done and converts the login box into password. Also, changes the
 * guidance contents.
 */
    alert(usernameDone);    //Always undefined (no modification before this)
    if(e.keyCode == 13 &amp;&amp; usernameDone == false) {    //Owing to undefined it never evaluates to true.
        var loginUsername = $(this).val();
        $(this).val('');
        var usernameDone = true;
        $(this).fadeOut(0);
        document.getElementById('login-box').setAttribute('type' , 'password');
        $('#login-guide-title').html('Password');
        $('#login-guide-info').html('Press enter to login');
        $(this).fadeIn(800);
    }
});

});
</code></pre>
