JS variable scope issue

Question 1

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?

Question 2

Put poGetPaymentOption inside the click event? It really depends on what you are trying to do and WHEN you are trying to do it.

Question 3

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.

Question 4

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.

Question 5

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);
 });
 }
}

Question 6

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

Question 7

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

Question 8

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.

Question 9

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

Question 10

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."

Question 11

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

Leeish 5,2132 gold badges21 silver badges48 bronze badges · Answer 1 · 2013-03-08 22:25:33Z

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);
 });
 }
}

Steve 8,6587 gold badges42 silver badges54 bronze badges · Answer 2 · 2013-03-08 22:25:56Z

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

The problem is that even if you DO click the button, the console output at the bottom still displays default, not credit card.
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.
But it doesn't. That's what I'm saying. It NEVER puts out 'credit card', even when the user clicks the button.
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."
When the user clicks the button, what does the console show? Does it output: "about to change payment type" at least?

CollectivesTM on Stack Overflow

JS variable scope issue

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related