Javascript error with undefined variable

Question

I have a problem where a method is getting an undefined variable error, even though I check for the variable being undefined before calling.

// Sets focus and text-select to the passed in element.
idNav.prototype.setFocusFromVar = function(r) {
    document.activeInputArea = r;   // my variable for tracking focus
    r.focus();    // error happens here (line 274 of idNav.js)
    r.select();
}

The error happens at the r.focus line.

In both places where I call the method, I use a pattern similar to the following with a local variable r in the caller.

if (!r)
    return;

this.setFocusFromVar(r);

and yet the error persists. When r is not null or undefined, it is an input element in a table on my webpage.

I continue to get r is undefined on line 274 of idNav.js, which is the r.focus line. All of the callers of the method are in the same js file as well.

What am I missing?

This error is occurring intermittently in Firefox, I haven't tested this specific error in IE.

EDTA: r did show up as an undefined and the stack trace of the error shows:

setFocusFromVar()(undefined)IDNav.js (line 275)
dhandler(Object originalEvent=Event keydown type=keydown)IDNav.js (line 100)
newTrigger()(Object originalEvent=Event keydown type=keydown)jquery.hotkeys.js (line 1)
F()()jquery.js (line 19)
F()(Object originalEvent=Event keydown type=keydown)jquery.js (line 19)
F()()jquery.js (line 19)
[Break on this error] r.focus();

dhandler is one of the methods I checked out and seemed to be good (no problems). I will take another look at that to be sure though:

It is used for handling the down-arrow and enter keys for navigation through my table of input elements.

Answer 1

I am not shure, but shouldn't you call if(r==undefined) instead of if(!r)? I always do it like that...

Answer 2

You should test that the variable is not null and is not equal to undefined.

Here's a good article on testing variables for existence in Javascript. It lists various ways to do it as well as the pros and cons of each method.

Answer 3

I rarely use if(!r) to test if a variable is undefined.

I prefer using if(typeof(r)=='undefined') or if(r!=null).

the value of r depends of its declaration and affectation.

• var r; =>undefined but testable to null (r==null will return true)
• var r="test"; => string test
• var r=null; => null;

Answer 4

I'd recommend moving (or duplicating) your sanity check inside the function as follows:

idNav.prototype.setFocusFromVar = function(r) {
    if (!r)
        return;

    document.activeInputArea = r;   // my variable for tracking focus
    r.focus();    // error happens here (line 274 of idNav.js)
    r.select();
}

Answer 5

Based on your description of the problem, it seems to me that it is sometimes getting called without the sanity check. I'd put the sanity check inside the function rather than outside of it.

However, you also probably want to know how you're getting around it in the first place. I'd modify the function as follows to inspect what is going wrong in Firebug:

idNav.prototype.setFocusFromVar = function(r) {
    if (!r) {
        return;  // Set the breakpoint here
    }
    document.activeInputArea = r;
    r.focus();
    r.select();
}

Then when you hit the breakpoint, you can look at Firebug's stack trace to determine how you got the function without checking whether r was defined or not.