Campers, please help me to figure out what's wrong with my Weather App


#1

Hey everyone!

I’ve been working in this project for hours and I’m getting stuck. I’ve been reading many tutorials and guidelines from MDN, W3Schools, Jquery and from other fellow developers, but it seems that I’m lacking something. I recycled some code that I used in the random quote machine, changing some features to handle a JSON instead of a JSONP. There are no errors to display in Codepen as you can see here: A simple weather app,
But when I go to the debug view, as you can see here Debug view,
I open Chrome development tools and I’m getting this message again and again Error in event handler for (unknown): TypeError: Cannot read property 'checked' of null so I’m guessing I have a serious problem with the way I coded the whole thing. Maybe my functions or variables are badly constructed. I appreciate any suggestion or idea.


#2

You have a function called getLocation, but you do not call it. Since you are using JQuery, you could put:

$(function() {getLocation()});

at the bottom of your code and it will run getLocation.

Even if you do this, you have other problems:

  1. If the browser does not support GeoLocaiton, then:
geoLocation.innerHTML = "Geolocation is not supported by this browser.";

is going to error out because you declared geoLocation at the top of your getLocation function as an Object, so you are creating a property called “innerHTML” in your geoLocation Object. If you intended to display the “Geolocation is not supported by this browser.” message in your html somewhere, then you need to create a DOM element with that name and then correctly assign the value to it in your JavaScript code.

  1. Next, you have:
var weather = "https://fcc-weather-api.glitch.me/api/current?lon=:geoLocation.lat&lat=:geoLocation.lng";

and then try to use it in your AJAX call. What you want to do is actually use the values of geoLocation.at and geoLocation.lng to build the correct url with something like:

var weather = "https://fcc-weather-api.glitch.me/api/current?lon=" + geoLocation.lng + "&lat=" + geoLocation.lat;
  1. When you made the call to get the coordinates with:
navigator.geolocation.getCurrentPosition(success, error);

you can not refer to geoLocation.lat and geoLocation.lng outside of the the success function because getCurrentPosition is asynchronous.

You had a ton of problems in your code. Below, I moved things around, added some functions, and removed some code not needed. It displays the temp in Celsius, you will notice the C is not beside the temperature. That is caused by using $("#temp").html(temp); which replaces the entire contents of the the temp div, so you will have to fix that.

You also need to take a look at what you are trying to put into the location div.

Lastly, you need to realize you are trying to put a number code into the img src. You need to read more about how to use those icon codes to get an actual image url to use there. I put a console.log(data) in your success function, so you can see what you are getting back from the AJAX call.

Hopefully this will get you started and you can finish the rest on your own. Good luck!

function getLocation() {
 function error() {
    alert("That's weird! We couldn't find you!");
  }
  function success(position) {
    var geoLocation = {};
    geoLocation.lat = position.coords.latitude;
    geoLocation.lng = position.coords.longitude;
    getWeather(geoLocation);
  }

  function getWeather(geoLocation) {  
    var weather = "https://fcc-weather-api.glitch.me/api/current?lon=" + geoLocation.lng + "&lat=" + geoLocation.lat;
    $.ajax({
      url: weather,
      dataType: "json",
      success: function(data) {
        console.log(data)
        var location = data.coord;
        var temp = data.main.temp;
        var img = data.weather.icon;
        var climate = data.weather.main;
        $("#location").html(location);
        $("#temp").html(temp);
        $("#weatherIcon").attr("src", img);
      }
    });
  }  
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, error);
  }
  else {
    geoLocation.innerHTML = "Geolocation is not supported by this browser.";
  }
}
$(function() {getLocation()});