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);
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();
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.
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).
It is because change handler is a callback， it will fired after the events happen, not executed the code order
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.
$('select option:selected').val();can simply bethis.value.