Warum sind meine Variablen außerhalb meiner Funktion nicht definiert?

Question

Ich bin neu bei Javascript und ich versuche, eine Website zu erstellen, die te Temperatur im Bereich des Benutzers anzeigt, aber meine la und lg Variablen sind außerhalb meiner showPosition() Funktion undefiniert, so kann ich die API nicht erfolgreich aufrufen Bekommen Sie das Wetter.

Hier ist der vollständige Code:

var la; 
var lg; 

function getLocation() { 
if (navigator.geolocation) 
    navigator.geolocation.getCurrentPosition(showPosition); 
} 

function showPosition(position) { 
la= position.coords.latitude; 
lg= position.coords.longitude; 
} 

getLocation(); 

var url="https://fcc-weather-api.glitch.me/api/current?lat=" + la + "&lon=" + lg; 
document.getElementById("im").innerHTML="Latitude:" + la; 

fetch(url) 
.then((resp) => resp.json()) 
.then(function(data) { 
    document.getElementById("temper").innerHTML="Temperature:" + data.main.temp; 
}) 
.catch(function(error) { 
    console.log("error: " + error); 
}); 

entschied ich mich zu testen, ob meine la und lg Variablen mit der Linie document.getElementById("im").innerHTML="Latitude:" + la korrekt sind, aber ich bekomme Latitude:undefined. Ich habe den gleichen Test innerhalb der showPosition() Funktion durchgeführt und die Variablen sind korrekt definiert. Wie kann ich das lösen?

Answer 1

Das Problem ist, dass showPosition nicht sofort aufgerufen wird (zum Beispiel dauert es einige Zeit, um das GPS zu initialisieren). Deshalb müssen Sie sich mit Ihrer Anfrage warten, bis Sie Ihre Positionsdaten erhalten haben:

var la; 
var lg; 

function getLocation() { 
if (navigator.geolocation) 
    navigator.geolocation.getCurrentPosition(showPosition); 
} 

function showPosition(position) { 
la = position.coords.latitude; 
lg = position.coords.longitude; 

var url="https://fcc-weather-api.glitch.me/api/current?lat=" + la + "&lon=" + lg; 
document.getElementById("im").innerHTML="Latitude:" + la; 

fetch(url) 
    .then((resp) => resp.json()) 
    .then(function(data) { 
    document.getElementById("temper").innerHTML="Temperature:" + data.main.temp; 
    }) 
    .catch(function(error) { 
    console.log("error: " + error); 
    }); 
} 

getLocation(); 

Answer 2

Verwendung dieses:

function getLocation() { 
    if (navigator.geolocation) 
     navigator.geolocation.getCurrentPosition(showPosition); 
} 

function showPosition(position) { 
    var la= position.coords.latitude; 
    var lg= position.coords.longitude; 
    fetchTemperature(la, lg); // create a method for fetch temperature and send la and lg to it 
} 

function fetchTemperature(la, lg){ // method for fetch temperature 
    var url="https://fcc-weather-api.glitch.me/api/current?lat=" + la + "&lon=" + lg; 
    document.getElementById("im").innerHTML="Latitude:" + la; 

    fetch(url) 
    .then((resp) => resp.json()) 
    .then(function(data) { 
     document.getElementById("temper").innerHTML="Temperature:" + data.main.temp; 
    }) 
    .catch(function(error) { 
     console.log("error: " + error); 
    }); 
} 

getLocation();