Retrieving JS variable

Question

$('#lobSelect').change(function () {
    var selectedLob = $('#mainWrapper').find('select[name="lob-select"] option:selected').val();
    console.log(selectedLob); //prints to the console
});

console.log(selectedLob); //not available here

In the code above i'm using the variable selectedLob to store the value selected from dropdown.

how can i retrieve that value from outside the function?

Also say this function is stored in a file1.js - how can i access this variable from file2.js in a different folder.

Thanks

Answer 1

When you declare a variable, you make it local to the scope of the function it is declared within.

Declare it outside the function:

var selectedLob;

And don't re-declare it inside:

$('#lobSelect').change(function () {
    selectedLob = $('#mainWrapper').find('select[name="lob-select"] option:selected').val();
    console.log(selectedLob); //prints to the console
});

It will still be undefined here:

console.log(selectedLob); //not available here

because it doesn't get a value assigned to it until the change event fires, but it will be accessible in the wider scope after that event has happened.

Answer 2

You can use global variable for your task, but this will lead to polluting the global namespace.

The good practise is to use application namespace instead of global namespace

Your file1.js

// your app namespace
var app = app || {};

// on document ready wrapper
$(function () {

$('#lobSelect').change(function () {
    // initialize your variable at app namespace
    app.selectedLob = $('#mainWrapper').find('select[name="lob-select"] option:selected').val();
});

});

Your file2.js

// use the same app namespace or create it
// if not exist yet (in case when file2.js was loaded before file1.js)
var app = app || {}; 
$(function () {

// app.selectedLob is available here

});

Answer 3

var selectedLob is local to $('#lobSelect').change(function () { function not accessible outside

Solution

var selectedLob =''; //declare variable outside so it accessible 
$('#lobSelect').change(function () {
    //assign value here
    selectedLob = $('#mainWrapper').find('select[name="lob-select"]  option:selected').val();
    console.log(selectedLob); //prints to the console
});

console.log(selectedLob);
 //it doesn't get the value as it runs before the change event fires so you get undefined value

Read What is the scope of variables in JavaScript?

Answer 4

You can use jQuery.data function to store in $('#lobSelect')

$('#lobSelect').data("yourKey", yourVariable)

And retrieve like this:

var someVariable = $('#lobSelect').data("yourKey")

Or declare the variable outside the function as suggested if you want to use it right after (data will store for a longer time):

var selectedLob;
$('#lobSelect').change(function () {
    selectedLob = $('#mainWrapper').find('select[name="lob-select"] option:selected').val();
    console.log(selectedLob); //prints to the console
});

console.log(selectedLob); 
//accessible here, 
//maybe not elsewhere in your code (depending on your code structure)

Answer 5

you can also set a global variable inside a function using the following method

window["variableName"] = "some value";

then access it anywhere. for example:

console.log(window["variableName"]);

Answer 6

First problem you have here is the fact that you are using selectedLob variable outside of the scope it is defined in, so you have to move its declaration one level up so it can be used outside of the function as well (or even better you should restructure your code so this kind becomes unnecessary).

Second problem you have is you declare selectedLob variable inside change event handler and expect it to be defined immediately. To fix this (if you are using JQuery here) you can call your change handler function right after you declare it to initially kick start your variable initialization.

So in summary something like this:

var selectedLob =''; //declare variable outside change handler so it accessible 
$('#lobSelect').change(function () {
    //assign value here
    selectedLob = $('#mainWrapper').find('select[name="lob-select"]  option:selected').val();
    console.log(selectedLob); //prints to the console
}).change(); // This will call your change event handler and hopefully init selectedLob

// Now selectedLob should be have value of selected option (if your DOM was ready...)
console.log(selectedLob);

And at the end I would have to say that you should really try to avoid things like this, try to restructure your JS code in a way that you maybe initialize all things you need in one place after DOM is ready and then to start up your app with some kind of init function passing all it needs or similar. Writing code like this will soon lead into one big pile of mess :)

Answer 7

Use global variable

 var selectedLob;  // use as a global variable to access outside of the function 
     $('#lobSelect').change(function () {
       selectedLob = $('#mainWrapper').find('select[name="lob-select"] option:selected').val();
       console.log(selectedLob); //prints to the console
     });

if(selectedLob!=undefined){

     console.log(selectedLob); //available here
}