Cannot access variable outside function jquery

Question

Have been reading around, and now very confused. I'm trying to access a local variable in the global scope. I have removed the var inside the function, but it is still coming back as "undefined". I'm sure I'm just missing something - any help would be greatly appreciated. Thanks!

var totalcostApple;

function shopping() {

    $("#apple").on("keyup", function () {

    var quantity = $("#apple").val();

    totalcostApple = (quantity * 0.2).toFixed(2);


     });

};

shopping();

console.log(totalcostApple);

you are trying to log the variable before it has been evaluated in the keyup event. Please explain expectations in more detail — charlietfl, Oct 12 '14 at 16:43
What I'd like to do is be able to access the totalcostApple variable outside the shopping function after the keyup event. Is this possible? — user3858292, Oct 12 '14 at 16:49
Yes. But in your case you are accessing the variable *before* the event happened. If you run `console.log(totalcostApple);` *after* the event it will work as expected. — Felix Kling, Oct 12 '14 at 16:49
I thought I was - I'm doing it after I call the function (I thought...) — user3858292, Oct 12 '14 at 16:54
@user3858292 no, `totalcostApple` will remain undefined until the event actually occurs and runs the handler code — charlietfl, Oct 12 '14 at 16:55
Your `shopping` function does nothing, except bind `keyup` event to the `#apple` element. You assign value to `totalcostApple` when you input something into the `#apple`. Without doing that, `totalcostApple` will always be `undefined`. — akinuri, Oct 12 '14 at 16:57
Okay - but even when I've input something, it does say "totalcostApple is undefined". I'll just keep playing around. — user3858292, Oct 12 '14 at 17:03
This is a classic bad pattern in asynchronous programming. To get a good result, the program needs to wait until totalcostApple is changed before accessing it, but instead does so immediately. Every day people ask this question, usually in ajax applications. But you don't need ajax to have it. Any kind of event handling brings it out. — Paul, Oct 12 '14 at 17:05
similar to common ajax woes in: http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — Paul, Oct 12 '14 at 17:10
Hi guys - thanks for all your help! I've managed to figure it out, by asking users to hit a submit button. This has worked! — user3858292, Oct 12 '14 at 17:11

score 0 · Accepted Answer · answered Oct 12 '14 at 17:17

You seem to be misunderstanding what you are doing. The flow of your code is all messed up. When you call shopping() you instruct the browser to tie the keyup event to the apple object. Right after tying it to the object however, you query the variable. But you are simply not fast enough to generate a keyup event between the shopping function and the keyup event. Just to show you, instead of logging to the console just that once, try logging it to the console at another time. At any time. Add the following line of code:

$(window).on('click', function(){ console.log(totalcostApple); });

Now you can test when your variable has actually changed. Every time you click, it will log the current value of the totalcostApple to the console.

But actually, you should improve your code as such:

// add some code to assure that everything you do only gets executed after the DOM is ready
$(document).ready(function(){
    // add a default value to your totalcost.
    var totalcostApple = 0;

    function shopping() {
        // remove your keyup event from here and tie it in directly.
        var quantity = $("#apple").val();
        totalcostApple = (quantity * 0.2).toFixed(2);
        // move your log inside the event so you can see it when it *changes*
        console.log(totalcostApple);
    };

    $("#apple").on("keyup", shopping);
});

Cannot access variable outside function jquery

1 Answers1