JQuery scope within nested functions

Question

This works:

$(document).ready(function(){

    $("#inputbuttonid").on("click", function(){ 

        var inputtext = $("#inputtextid").val();
        alert(inputtext);

    });

});

But this doesn't work:

$(document).ready(function(){

    var inputtext = $("#inputtextid").val();

    $("#inputbuttonid").on("click", function(){ 

        alert(inputtext);

    });

});

By "works" I mean it alerts the correct information.

The only difference in the above 2 cases is that in the second, I put

var inputtext = $("#inputtextid").val();

in the outer function, whereas in the first, I put it in the inner function.

According to the JQuery manual, "local scope works through functions", meaning "any functions defined within another have access to variables defined in the outer function" (quoted from the JQuery manual).

So, why in the second case above, does the inner function not have access to "inputtext"?

... but if you're expecting the value to magically update itself, it wont! — adeneo
– adeneo, Commented Apr 11, 2014 at 21:37
it would "magically" update if you used something like knockout.js (bindings), but yes, as written; no magic. — pennstatephil
– pennstatephil, Commented Apr 11, 2014 at 21:42

Felix Kling · Accepted Answer · 2014-04-11 21:42:17Z

5

So, why in the second case above, does the inner function not have access to "inputtext"?

It does have access¹, but you are executing the statement before the user entered a value. The value is read immediately when the DOM is ready, not when the user clicks the button.

The only difference in the above 2 cases is that in the second, I put [...] in the outer function, whereas in the first, I put it in the inner function.

And this change has the consequence that that statement is now executed at a different time, at which the input field doesn't have a value yet.

1: If it didn't, you would get a reference error.

edited Apr 11, 2014 at 21:42

answered Apr 11, 2014 at 21:37

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

thanks_in_advance Over a year ago

Excellent, thanks. I'll mark your answer right as soon as SO lets me :-)

thanks_in_advance Over a year ago

Serious question: I just noticed your SO score. Is your brain sufficiently trained that you read code like you were reading Shakespeare, and you dream in code?

pennstatephil · Accepted Answer · 2014-04-11 21:39:22Z

0

In the 2nd example, your variable is initialized on document load, and there's no code in the click function to get the new value. This would work:

$(document).ready(function(){

    var inputtext = $("#inputtextid").val();

    $("#inputbuttonid").on("click", function(){ 
        inputtext = $("#inputtextid").val();
        alert(inputtext);

    });

});

answered Apr 11, 2014 at 21:39

pennstatephil

1,6633 gold badges25 silver badges47 bronze badges

Collectives™ on Stack Overflow

JQuery scope within nested functions

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related