CODEWITHSUNDEEP
javascript
compguy24
compguy24

Reputation: 957

modifying javascript variable within function

I've read up on declaring variables globally and then being able to modify them in functions, but things aren't working out for me.

Here is my code:

var selectee = "JK";
// get state selected
$('select.form-control.bfh-states').change(function () {
    selectee = $('select option:selected').val();
    // works correctly, but i need to access it outside the function
    console.log(selectee); 
});

// output JK, should change based on a select box on the form
console.log(selectee);

Upvotes: 1

Views: 144

Answers (5)

Joke_Sense10
Joke_Sense10

Reputation: 5402

An alternative method would be is to pass the selected value into a new function and hence access it within that function(not globally). Try this:

 selectee = "JK";
 // get state selected
$('select.form-control.bfh-states').change(function () {

selectee = $('select option:selected').val();
// works correctly, but i need to access it outside the function
mynewfunc(selectee);

});
function mynewfunc(){
alert(selectee);
}

Note: The variable selectee is not accessible outside new function mynewfunc once the change is triggered.

Demo

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

It is because the the change() handler will get executed only when the change event is fired from the select element. You are using the console.log() statement in a sequential executio which will get executed before the change handler is fired

//this is correct
var selectee = "JK";

//this registers a change handler for the select element
$('select.form-control.bfh-states').change(function () {
    //but this will not execute now!!! it will get executed only when the select elements change event is fired
    selectee = $(this).val();
    console.log(selectee); // works correctly, but i need to access it outside the function
});

//this will get executed as soon as the change handler is registered not after the handler is executed
console.log(selectee);

If you want selectee to have the value selected in the select element then you can either do something like 

var selectee = $('select.form-control.bfh-states').val() || "JK";

or manually fire the select change handler once the handler is attached on dom ready like

var selectee = "JK";

$('select.form-control.bfh-states').change(function () {
    selectee = $(this).val();
    console.log(selectee); // works correctly, but i need to access it outside the function
}).change();

Upvotes: 2

jfriend00
jfriend00

Reputation: 707326

The way to fix this problem is to execute the code that needs the value of selectee from within the change handler. You shouldn't be storing it in a global variable in the first place.

// get state selected
$('select.form-control.bfh-states').change(function () {
    var selectee = $('select option:selected').val();
    console.log(selectee); // works correctly, but i need to access it outside the function

    // call your other code from here and pass it the current value of selectee
    myOtherFunction(selectee);

});

To explain, the .change() callback function is ONLY executed when the value of the select actually changes. It will be called sometime LATER. So, to use the value of selectee sometime later, you need to execute the code that needs that value at the same time that the new value has been changed.

Upvotes: 1

Pazzilivo
Pazzilivo

Reputation: 526

It is because change handler is a callback， it will fired after the events happen, not executed the code order

Upvotes: 0

Chibuzo
Chibuzo

Reputation: 6117

You code doesn't work procedural as you think. selectee will reflect the new value only after the change event of your select control is fired. The codes inside event handlers don't execute until they are called/triggered/fired. But those outside, like your console.log(selectee) will execute the first time the code is loaded (which in your case, the change event hasn't been called).

Upvotes: 0

Related Questions