JS variable scope issue

Question

I have the following function:

function initPaymentBlock(bIdx) {  

    var paymentType = 'default';
    if( $('#gc-apply-btn-'+bIdx).length ) {
        $('#gc-apply-btn-'+bIdx).click( function() { 
            poApplyGiftCard(bIdx); 
            console.log("about to change payment type");
            paymentType = 'credit card';
            console.log("paymentType inside function: " + paymentType);
        });
    }

    console.log("payment type: " + paymentType);
    poGetPaymentOption(paymentType, 0, bIdx);

}

The paymentType variable is set to 'default' inside the initial statement. Inside the internal click function, it's changed to 'credit card'. When I run the console.log statement inside the internal function, it returns credit card. The console.log outside the internal function (right before the poGetPaymentOption call) returns 'default'.

I know the issue is the scope of the variable, but can't figure out how or where I can set it so that the poGetPaymentOption function call gets the correct value ('default' if the button isn't clicked before it's run; 'credit card' if the button is clicked.) Can someone help me out?

Put poGetPaymentOption inside the click event? It really depends on what you are trying to do and WHEN you are trying to do it. — Leeish
– Leeish, Commented Mar 8, 2013 at 22:26
Can't. There are other functions defined in the main function, and that one needs to be called after all of them. Don't want to have to repeat it by putting a call in each internal function. — EmmyS
– EmmyS, Commented Mar 8, 2013 at 22:28
Well if that is the case then paymentType will always be its initial value when poGetPaymentOption gets run because it can't change until someone clicks something, and from what you just said poGetPaymentOption gets run when initPaymentBlock gets run. — Leeish
– Leeish, Commented Mar 8, 2013 at 22:29

Leeish · Accepted Answer · 2013-03-08 22:25:33Z

1

Its pretty obvious. The click changes the value but only after the click. Your second console log runs before a click event is fired. What is wrong with this?

function initPaymentBlock(bIdx) {  

    var paymentType = 'default';
    if( $('#gc-apply-btn-'+bIdx).length ) {
        $('#gc-apply-btn-'+bIdx).click( function() { 
            poApplyGiftCard(bIdx); 
            console.log("about to change payment type");
            paymentType = 'credit card';
            console.log("paymentType inside function: " + paymentType);
            poGetPaymentOption(paymentType, 0, bIdx);
        });
    }
}

answered Mar 8, 2013 at 22:25

Leeish

5,2132 gold badges20 silver badges48 bronze badges

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

Comments

Steve · Accepted Answer · 2013-03-08 22:33:01Z

1

There is no issue with scope. It's all about the order of execution.

Here is how the code executes:

When you enter the initPaymentBlock function, you set it to 'default'.
Then you create a click handler that will change its value to 'credit card', but ONLY AFTER somebody clicks a button.
Then your console output at the bottom puts out the current value, which is still 'default'.
Now, if the user clicks the button, the click handler will execute and it will output 'credit card'

Here is the expected console output when you run initPaymentBlock():

payment type: default

That's it. Now when you click the button, the following output will show:

about to change payment type
paymentType inside function: credit card

edited Mar 8, 2013 at 22:33

answered Mar 8, 2013 at 22:25

Steve

8,6487 gold badges42 silver badges54 bronze badges

5 Comments

EmmyS Over a year ago

The problem is that even if you DO click the button, the console output at the bottom still displays default, not credit card.

Steve Over a year ago

The console output at the bottom only executes once, at the initial call of the initPaymentBlock function. It never executes again after the button click.

EmmyS Over a year ago

But it doesn't. That's what I'm saying. It NEVER puts out 'credit card', even when the user clicks the button.

Steve Over a year ago

Well, that's not what it sounded like from your original question. There you stated: "When I run the console.log statement inside the internal function, it returns credit card."

Steve Over a year ago

When the user clicks the button, what does the console show? Does it output: "about to change payment type" at least?

Collectives™ on Stack Overflow

JS variable scope issue

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related