Accessing global variable from method within a function

Accessing global variable from method within a function
0

#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);
}

#2

I ran your code and everything works fine for me.

What do you see on the screen when the alert(url); executes inside the success function?


#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.


#4

Can you post all your code (html, css, and JavaScript)? I want to check something. If you have a Codepen or JSFiddle link, that would work too.

UPDATE: I took your JS code which is all I had and put it into a JSFiddle (see here). I had to add a div element with and id of “out”, but other than that I changed nothing in your code.


#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.


#6

The “Hello World” alert runs before geoFindMe() finishes, because:

navigator.geolocation.getCurrentPosition(success, error);

is an asynchronous function, so other code can keep on running and it will not execute the success function until after it gets data back successfully from the getCurrentPosition call.


#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.


#8

As your JSFiddle is right now, the success function has the latitude and longitude for you to use inside the success function. Now you just need to figure out how to make a call to a weather API of your choice (most campers are using the freeCodeCamp Weather API https://fcc-weather-api.glitch.me) and then retrieve the weather data back in order to populate the page with current weather data. Just google “how to make an ajax call to api” and you will get to ready all about how to make api calls.

Here are a couple FCC videos to help get your started:
Using Vanilla JS

Using JQuery


#9

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