Weather App-problem returning values from functions

JavaScript
1

Getting the data from the weather API, inserting the values, including the correct C or F unit into the web page was the easy bit. Now I am having difficulty knowing how to get the temperature data out of the function and using it in an event handler. I got a version of the app working–without the conversion button, but the code was messy.

I have included the js to where it started to become “messy”. My question is "How do I pass the temperature value into another function so it can be bound to an event handler?

Here is my (truncated) code. Thank you!

3

Thank you! Sometimes I cant see the tress for the forest. I can see success not far away now.

. So now I have the conversion button working with the event button. One thing that confuses me though with global variables, I get a reference error if I try to see the value assigned to global vars (console.log), after they have been changed within a function–e.g. myLat, myLng.

BUT adding in the geolocator coords is now causing me some difficulty. (I thought this would be easy!) I appear to be building the correct URL, but the response to the Get request is coming back with a 404 error.

I had problems with the lat and lon vars being assigned values after the API request–so I placed the API request/send/respond in a new function. I think it’s another scope issue.

var api = "https://fcc-weather-api.glitch.me/api/current?";

var currentUnits = "C";
var currentTemp = "";
var myLat = "";
var myLng = "";


/////// determine your lat and lon coords ////////////
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    myLat = "lat=" + position.coords.latitude; //global var
    myLng = "lon=" + position.coords.longitude; //global var
    getWeather(myLat, myLng);
  });
} else {
  console.log("Geolocation is not supported by this browser.");
} //END geolocation


////////////// request the weather API/////////////////
function getWeather(myLat, myLng) {
  var requestURL = "'" + api + myLng + "&" + myLat + "'";
  var request = new XMLHttpRequest();
  console.log(requestURL); ** ** ** ** ** //URL looks correct here

  request.open('GET', requestURL); ** ** * ///////////////getting a 404 error
  request.responseType = 'json';
  request.send();

  request.onload = function() {
    var allWeather = request.response;
    console.log(allWeather); ** ** ** ** ////////////////////failed to get the json object
    currentTemp = allWeather.main.temp; //global var
    myWeather(allWeather);
    weatherIcon(allWeather);
    myCountryUnit(allWeather);
  } // END request onload

} //END getWeather
5

Thanks Randell. After much angst I discovered the additional Quotations were the problem with the construct URL.

function getWeather(myLat, myLng) {
  var requestURL = "'" + api + myLat + "&" + myLng + "'";

should have been:

function getWeather(myLat, myLng) {
  var requestURL =  api + myLat + "&" + myLng ;

The script functions now! So all I have to do is make it look good…

Again, thank you for your patience and taking the time to help me. I wish you a happy Christmas and New Year.

7

Yes. After earnestly looking at typeof and reading about data types; I searched google for " URL gets a %27 added?" All about being an inexperienced learner. I think I will need a “breather” before tackling the next challenge.