Accessing global variable from method within a function

JavaScript
1

I’m trying to update the global url variable from within the success method inside the geoFindMe function. I can update url inside of the geoFindMe function (as long as it’s not within a method), but if I try to do so within a method it breaks. Help!

var url = "Hello World";

geoFindMe();

alert(url);

/*** FUNCTIONS ***/
function geoFindMe() {
  var output = document.getElementById("out");

  if (!navigator.geolocation){
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
    return;
  }

  function success(position) {
    var latitude = Math.round(position.coords.latitude);    
    var longitude = Math.round(position.coords.longitude).toString();
    var lat = latitude.toString();
    var lon = longitude.toString();    
    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
    url = "https://fcc-weather-api.glitch.me/api/current?lat=" + lat + "&lon=" + lon;
    alert(url);
  }

  function error() {
    output.innerHTML = "Unable to retrieve your location";
  }

  output.innerHTML = "<p>Locating…</p>";
  
  navigator.geolocation.getCurrentPosition(success, error);
}
3

Inside the success function it shows the value of the url variable within the success function itself. I think the issue is somewhere in navigator.geolocation.getCurrentPosition(success, error);. The success function will execute before the user even accepts the location request, and because so doesn’t have any coordinates to pass.

5

JSFiddle

I added comments to express what I’m trying to do. I want the url alert outside of the function to run only after the url has been updated inside of geoFindMe, but for some reason the alert runs before geoFindMe finishes. Is JS not sequential?

I’m only curious because when I tried to do a GET from the API, I kept getting an error. I added an alert within the GET to show me the error, and it was because the GET was running before geoFindMe set the url.

7

So how would I go about resolving this? I’m looking into callback functions now, but not sure if I’m on the right track.

9

Looks like it’s working now. Thanks for your help!