How to accurately access weather API via the $.getjson method JSON

I'm building a weather app on FCC and I'm stuck because my code is not working. I'm not getting a pop up request for browser access to my location. I wrapped that pop-up request in my button.click function. I'm a novice and I'm getting very frustrated. I need help!!

Here is my Code:

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

        $(document).ready(function(){

        $("button").click(function(){

        if (navigator.geolocation) {

        navigator.geolocation.getCurrentPosition(function(position) {
            
         var lat = "lat=" + position.coords.latitude ;
            
         var lon = "lon=" + position.coords.longitude;

   $.get(Api+lat+"&"+ lon, function(result){

        $("#city").text(result.main.name);

        $("#country").text(result.sys.country);

        $("#weather").text(result.weather[0].main);

        $("#w-icon").text(result.weather[0].icon);

        $("#temp").text(result.main.temp);

        $("humidity").text(result.main.humidity);

        });


        });


        });
            else {

        console.log ("Geolocation is not supported by this browser");
    }
         });

https://codepen.io/Ojomiba/pen/dVgQeQ

Solution

Open the developer tools in your browser.

Look at the Console.

Read the error messages.

Uncaught ReferenceError: lat is not defined

You've defined lat inside the function you pass to getCurrentPosition, but you are trying to use it outside that function.

You need to move the code that tries to use it so it is inside the function.