Question

Ok, so I have two files , index.html and functions.js (index.html correctly includes functions.js).

When clicking a button in the webpage, a function gets called in the functions file, which updates elements in the web-page (correctly) and attempts to set two global variables ( woind that by doingwindow.var1 and window.var2 . No errors so far in the web console.

After this function gets called, in the index.html I run a code of JS that attempts to read window.var1 and window.var2, but finds them both to be null.

Why is that ? Could you also please point me to some material regarding as to why this happens, not just the solution ?

EDIT
I am using jquery and jquery mobile.
The event handler that calls the two functions is

 $('#map').live('pageshow',function(){
            console.debug('clicked button, calling function');
            position(longitude,latitude); //sets the global vars
            initializeMap();
            console.debug('finished with map calling');
        });

and sits inside a document.ready() .

EDIT 2
I know am sure that the two functions happen sequentially, I am doing a console.log() at their entry points.

Answer 1

I’m going out on a limb in the absence of full code…

It could be that you’re declaring and setting these variables inside a function. Function scope means that they don’t exist outside of any function in which they are declared. The solution is to declare them (using the var keyword) outside of any function (i.e. at the top of the file), and set them inside the function.

Otherwise, they’re not global.

Forgive me if this is completely not the case.

var myGlobal = 0;

myFunction = function() {
    myGlobal = 42;
}

// myGlobal now is equal to 42

Whereas…

myFunction = function() {
    var myGlobal = 42;
}

// myGlobal now is null