Uncaught ReferenceError for a function defined in an onload function

Question

HTML:

<div id="myID" onclick="cc(this.id)">Click Here</div>​

JavaScript:

var timer;
var firing = false;
var begen = function(id) {
    alert('tek');
};

var popupAc = function(id) {
    alert('çift');
};

function cc(id) {
    if (firing) {
        popupAc(id);
        clearTimeout(timer);
        firing = false;
        return;
    }
    firing = true;
    timer = setTimeout(function() {
        //begen(id);
        clearTimeout(timer);
        firing = false;
    }, 250);
}

Error:

Uncaught ReferenceError: cc is not defined 

Example: http://jsfiddle.net/LXSZj/3/

Answer 1

Your JSFiddle preferences are set to "onload", so the content of the JavaScript pane is wrapped in a function.

This scopes cc (dd does not exist, creating an additional problem for the jsfiddle example) to that function and stops it being a global.

Since you are trying to call it from an intrinsic event attribute, you are in a different scope and cannot access it.

As a quick fix, you can change the preference to 'nowrap', however that won't make the code conform to best practises.

It is recommended to avoid intrinsic event attributes in favour of binding event handlers with Javascript. YUI3 provides an event module and jQuery provides the on method to help with this (other libraries are available). See also: Unobtrusive JavaScript.

For example, see this js fiddle.