Javascript/JQuery Variable Scope

Question

I have some variables that I want to use in jQuery's focus event. How do I declare them so they are in the focus callback?

var height = 72;

$('#myfield').focus(function() {
    heightinfeet = height / 12;
    alert(heightinfeet);
});

For me, height is always 0. There are several variables to pass and I've tried making it an object using this for properties and that didn't pass them in either

/* real code */

function GOPRO_pfFieldConfirmation(oField1, oField2, oMarkerField, bCaseSens) {

var GOPRO_iFieldLen1 = $(oField1).val().length;
var GOPRO_iFieldLen2 = $(oField2).val().length;
var GOPRO_sFieldVal1 = $(oField1).val();
var GOPRO_sFieldVal2 = $(oField2).val();
var GOPRO_sFieldSub = GOPRO_sFieldVal1.substring(0, GOPRO_iFieldLen2);

//if not case sensitive, make all upper case

if (bCaseSens == false) {
    GOPRO_sFieldVal1 = GOPRO_sFieldVal1.toUpperCase();
    GOPRO_sFieldVal2 = GOPRO_sFieldVal2.toUpperCase();
    GOPRO_sFieldSub = GOPRO_sFieldSub.toUpperCase();

}

$(oField1).focus( function() {
    console.log(GOPRO_iFieldLen1);
    if ((GOPRO_sFieldVal1 == GOPRO_sFieldVal2) && GOPRO_iFieldLen1 > 0) {
        GreenMarker();
    }
    else if (GOPRO_iFieldLen1 > 0 && GOPRO_iFieldLen2 > 0) {
        RedMarker();
    }
    else {
        NoMarker();
    }

});

...

    GOPRO_pfFieldConfirmation($('#reg_email'), $('#reg_email2'), $('.field_confirm:eq(3)'), false);

console.log is always 0, actually all the predefined variables return 0 or null strings

Read this - http://stackoverflow.com/questions/500431/javascript-variable-scope — Jay Blanchard, Nov 09 '12 at 20:41
For one thing, you don't have a closing `)` on your call to `focus`. — Joshua Dwire, Nov 09 '12 at 20:41
Nothing in your question demonstrates the issue you describe. Clearly `height` will not be `0` based on the given code. Can we see some real code instead of this pretend stuff? — I Hate Lazy, Nov 09 '12 at 20:43
Here is your exact code. The behavior you are describing does not occur. http://jsfiddle.net/tAPTc/ — Asad Saeeduddin, Nov 09 '12 at 20:53
ok, there must something in my real code. The reason I asked is because I thought that my sample code should work — The Hawk, Nov 09 '12 at 20:57
When is you (real) code called? Is the DOM loaded at the time? — Matt Burland, Nov 09 '12 at 21:01
This isn't a scope problem, `$(oField1).val().length;` is just 0. So your selector is wrong, or the DOM isn't loaded. — Chad, Nov 09 '12 at 21:07
I know what the problem is. Those values don't change, you need to get the values everytime you get focus — The Hawk, Nov 09 '12 at 21:14

score 0 · Accepted Answer · answered Nov 09 '12 at 21:21

This isn't a scope problem, here is what is happening:

You call this function which selects your elements and stores the length of the value within the input box
Later a person focuses into the box while it is empty, and 0 is logged since that what was stored earlier
They type in the box, blur away and focus in again; this time you still get 0 because that is still what was stored on the initial call to the function, that variable was never updated.

You need to do something more like this:

function GOPRO_pfFieldConfirmation(oField1, oField2, oMarkerField, bCaseSens) {
    var $field1 = $(oField1), $field2 = $(oField2);

    $field1.focus(function() {
        //put these in the focus event, so they are bound everytime.
        var GOPRO_sFieldVal1 = $field1.val();
        var GOPRO_sFieldVal2 = $field2.val();
        var GOPRO_iFieldLen1 = GOPRO_sFieldVal1.length;
        var GOPRO_iFieldLen2 = GOPRO_sFieldVal2.length;
        var GOPRO_sFieldSub = GOPRO_sFieldVal1.substring(0, GOPRO_iFieldLen2);
        //if not case sensitive, make all upper case  
        if (bCaseSens == false) {
            GOPRO_sFieldVal1 = GOPRO_sFieldVal1.toUpperCase();
            GOPRO_sFieldVal2 = GOPRO_sFieldVal2.toUpperCase();
            GOPRO_sFieldSub = GOPRO_sFieldSub.toUpperCase();
        }

        console.log(GOPRO_iFieldLen1);
        if ((GOPRO_sFieldVal1 == GOPRO_sFieldVal2) && GOPRO_iFieldLen1 > 0) {
            //GreenMarker();
        } else if (GOPRO_iFieldLen1 > 0 && GOPRO_iFieldLen2 > 0) {
            //RedMarker();
        } else {
            //NoMarker();
        }
    });
}

GOPRO_pfFieldConfirmation('#reg_email', '#reg_email2', '.field_confirm:eq(3)', false);

I added a couple other things like: caching the jquery object so you create it only once, making less calls to .val(), and not wrapping an object twice (you made a jquery object in the function call, then wrapped it again inside).

You can see a jsFiddle of it working. It will still be 0 when you first focus into the box, but focusing into a box with text will yield the expected results.

Javascript/JQuery Variable Scope

1 Answers1