Why does my event handler cause an "is not a function" error, but works from the Firebug console?

Question

Using JQuery 1.2.6, testing from Firefox 3 and IE7. I have a very basic bit of JavaScript to reload a captcha image. In my JS file, I have:

var Captcha = {
    count: 0,

    Refresh: function(){
        // Concatenate "count" to force a URL change, which forces the browser to reload the image
        $('#Captcha').attr('src', 'Captcha.aspx?' + Captcha.count);
        Captcha.count++;
    }
}

My link looks as follows:

<a href="javascript:void(0);" id="ChangeCaptcha" onclick="Captcha.Refresh();">Try a different image</a>

When I click on the link, I get a JavaScript error. From the Firebug plugin for Firefox, it says "Captcha.Refresh" is not a function. So, I go to my Firebug console in the same window, and type

Captcha

And I get an "object" in the response line (as expected). I then type

Captcah.Refresh

And I get a function() in the response line (as expected). I then type

Captcha.Refresh()

And it executes the function, updates my captcha image, everything is dandy. If I go back and try the link again, it still does not work. If I type in Capcha.Refresh() into the console without ever hitting the link, it also works fine. What on earth am I missing here? Clearly the JS is getting loaded, but why doesn't that function call work?

Answer 1

The problem arises because you have an element with an id of Captcha, and a global variable with the same name. IE traditionally introduces a global variable for every id attribute. FF doesn't... but pretends it does in certain situations for compatibility with IE. In this case, the click handler sees Captcha as an element rather than your object.

Work-arounds:

Change the id of the Captcha element.

Or, change the name of your global object to something other than Captcha.

Or, use Pim Jager's technique to move interpretation of the handler into a context where the global Captcha variable has been overwritten with your own.

Or, change your onclick attribute to:

onclick="window.Captcha.Refresh();"

...this will force lookup of the Captcha property in the context where it has been replaced by your global variable.

(all of these tested in IE6 and FF3 - i recommend Pim Jager's answer)

Answer 2

Try sepperating the HTML and javascript:

$('#ChangeCaptcha').click(Captcha.Refresh);