Assigning hidden variable in a function within a function

Question

I have javascript code similar to the following, however when I try to use 'myVar' within foo(), its value is undefined. I've also tried passing the variable into bar() and assigning it directly, but will not pass by reference.

function foo() { 
   bar();
   var myVar = document.getElementById('coords').value;
   // myVar should now be (40.7143528, -74.0059731)
   alert(myVar); // returns blank

   var request = {
    location: myVar,
    radius: 500,
    types: [type] //previously defined 
   };

   //Then send a search request to Google...
}

function bar() {
   geocoder.geocode( {'address':address}, function(results, status) {

      document.getElementById('coords').value = results[0].geometry.location;
      // Let's say the location is NYC (40.7143528, -74.0059731)

     alert(document.getElementById('coords').value); //returns the correct value
     // however, this pops up after the pop up in function foo() 

   });
}

with the following HTML

<input type="hidden" id="coords" name="coords"/>

The real code is using Google Maps API if that makes a difference:

Also, when I placed debug alerts, it seems as if the creation of 'myVar' occurs before bar() is called. — Adam Thompson
– Adam Thompson, Commented Apr 1, 2013 at 22:59
foo() is called onClick on a button (before the hidden variable in the HTML) — Adam Thompson
– Adam Thompson, Commented Apr 1, 2013 at 23:01
Trying to access myVar (or at least the value placed into the hidden variable 'coords') a few lines down in foo() — Adam Thompson
– Adam Thompson, Commented Apr 1, 2013 at 23:13

Explosion Pills · Accepted Answer · 2013-04-02 20:25:47Z

1

bar runs asynchronously because geocoder does. That means that

document.getElementById('coords').value = results[0].geometry.location;

actually executes after

var myVar = document.getElementById('coords').value;

You can't use ajax this way. All of your work that relies on results/status has to be done in the callback.

answered Apr 2, 2013 at 20:25

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam Thompson Over a year ago

Thanks. What I ended up doing was just putting bar() inside foo(), instead of having it as an additional function. I would've liked to have the separate function, but I will likely not need it.

Travis J · Accepted Answer · 2013-04-01 23:02:11Z

1

jsfiddle Demo

Runs fine for me. Make sure when defining your functions to actually use function in front of the definition.

function foo() { 
 bar();
 var myVar = document.getElementById('coords').value;
}

function bar() {
 document.getElementById('coords').value = 4;
}

foo();

answered Apr 1, 2013 at 23:02

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

Collectives™ on Stack Overflow

Assigning hidden variable in a function within a function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related