Show the local weather problem

1

I am having trouble with the local weather challenge

Here is the js code



var Weather;
var lat;
var lon;
var myURL;
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
     myURL = "https://fcc-weather-api.glitch.me/api/current?lat=" + lat + "&lon=" + lon;
  });
}
$(document).ready(function() {
 $.getJSON(myURL, function(data) {
   Weather = data;
   $("#TEMP").html(Weather.main.temp);
 }); 
});

how come my code wont work with $(document).ready(function() {whatever}); at the last couple of lines,but it works when I replace it with $(“h1”).click(function() {whatever});

And here is the html



<h1>This is the heading</h1>
<p>This is where we say what town you are in</p>
<p id="TEMP">The temperature</p>
<p>Description of the weather</p>
<p>Animation of the weather</p>
<p>Animation of the wind</p>
2

With the way you currently have your code written, myURL does not have a value by the time the page is loaded ($(document.ready(function) { }. So when the $.getJSON runs, myURL is undefined and the p element with id=“TEMP” does not change.

If you move your getJSON call to line after you assign myURL a value, you will get something. Also, I recommend putting everything within the $(document.ready(function() { }. That way, nothing happens until all the DOM elements have loaded to the page.

1 Like
3

Also i thought i saw somehwere that the spacing matters. + lon + could be different from +lon+

This is from a tutorial i saw on this by coding tutorial (very helpful). Correct me if i’m wrong :wink:

It might just be easier to use variables instead of using dot notation (a variable is equal to the dot notation). This is so its easier for you to read later on.

5

i did

var temperature = data.main.temp;

So its much easier to read and use.