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.

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.

• javascript
• firefox

• What is the result if you try "alert(r)" (or inspect the variable in Firebug) right before r.focus() is called? – Dan Lew Commented May 28, 2009 at 14:49
• I will try putting an alert in. Its hard to inspect it in Firebug because if I put in a breakpoint I had to press continue all the times the call doesn't fail. – Tony Peterson Commented May 28, 2009 at 14:57
• what's the stack trace from firebug? is there another place calling it that you forgot about? (and why not add the if (!r) return; inside of setFocusFromVar() – Jonathan Fingland Commented May 28, 2009 at 14:58
• I added the alert and went through the method call a number of times before the error came up. The alert showed as undefined – Tony Peterson Commented May 28, 2009 at 14:58

5 Answers 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.

I'd remend 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();
}

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

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.

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;