why this closure is not working?

Question

I have declared a divHandler fn which is then get attached to the onclick event.

After reading about closures, I understand that divHandler would have access to the enclosing environment which in this case is a function which gets attached to the onload event. So divHandler should have access to cnt var which is initialized to 0.

But when I click execute the div I get Uncaught reference error: cnt is not defined

I don't understand how can this be possible? Please help me with this. Thanks.

<script>
function divHandler(e){
    ++cnt;
    document.getElementById("d1_cnt").innerHTML=" clicked "+ cnt + " times...";
}   
window.onload=function() {
        var cnt=0;
        document.getElementById("d1").onclick=divHandler;
    }
</script>

<body>
  <div id="d1">Div click me</div><span id="d1_cnt"></span>
</body>

because cnt is not global. write it before `window.onload=...` — Think Different, Jul 25 '14 at 12:02
Learn to use debug, press F12 in chrome, or install firebug in firefox, then F12. — Eric, Jul 25 '14 at 12:03
@flybird I'm not sure that helps here really. OP can see what is happening, just doesn't understand *why* — CodingIntrigue, Jul 25 '14 at 12:04
@flybird: Well, technically, **all** JavaScript functions are closures. That's how global variables work. But yes, `divHandler` doesn't close over the relevant info. — T.J. Crowder, Jul 25 '14 at 12:07

T.J. Crowder · Accepted Answer · 2014-07-25T12:10:09.920

Because cnt is a local variable in the function you're assigning to onload, and divHandler doesn't close over it. It's just like this:

function foo() {
    var a = 42;
}
// Can't access `a` here.

Instead, move cnt out to where divHandler can close over it — but don't make it a global if you don't have to:

(function() {
    var cnt = 0;

    function divHandler(e){
        ++cnt;
        document.getElementById("d1_cnt").innerHTML=" clicked "+ cnt + " times...";
    }   
    window.onload=function() {
        document.getElementById("d1").onclick=divHandler;
    }
})();

Note that the scoping function I've put around that code also makes divHandler no longer global, as (barring something you haven't shown) there's no reason for it to be.

Or actually, you could just put it all in your onload:

window.onload=function() {
    var cnt = 0;

    function divHandler(e){
        ++cnt;
        document.getElementById("d1_cnt").innerHTML=" clicked "+ cnt + " times...";
    }   

    document.getElementById("d1").onclick=divHandler;
};

Side note: The window.load event happens very late in the page loading cycle, after all images and other external resources are fully loaded (or have failed). You don't need to wait that long to hook up your click handler. Just make sure your script element is below the markup for the elements you want it to work with in your HTML, and you can hook up the handler right away. The usual recommendation is to put scripts just before the closing </body> tag, since that means they can access everything above them.

<body>
  <div id="d1">Div click me</div><span id="d1_cnt"></span>
  <script>
    (function() {
        var cnt = 0;

        function divHandler(e){
            ++cnt;
            document.getElementById("d1_cnt").innerHTML=" clicked "+ cnt + " times...";
        }   

        document.getElementById("d1").onclick=divHandler;
    })();
  </script>
</body>

score 0 · Answer 2 · answered Jul 25 '14 at 12:03

Scope is based on where variables / functions are declared not where they are assigned.

var cnt scopes the variable to the (anonymous) function that it is defined within.

The function divHandler is not declared inside that function, so it has no access to that variable.

Move the divHandler function declaration inside the anonymous function expression.

score 0 · Answer 3 · edited May 23 '17 at 12:20

0

I see you have missed understanding

Local variable vs global variable
closure scope

This StackOverflow link on Closure will help you understand better

edited May 23 '17 at 12:20

Community

1
1

answered Jul 25 '14 at 13:16

Samal

31
2

why this closure is not working?

3 Answers3