Weather challenge: Jquery not working with HTML

Weather challenge: Jquery not working with HTML
0

#1

I’m working on show local weather challenge and was progressing fine (with some issues here and there) but I managed to get my API to work and use jquery to interact with the html. So then I began to work on the html a bit to get the website layout finished and comment out areas for button and images.

Ever since I have been trying to run the code again but the values from API aren’t showing anymore (like temperature and city).

If someone can please take a quick look and see what is causing the problem and why they are not showing anymore. I’ve edited out my API key (but it works), I’m still working on the code if it looks messy that’s why. Thanks a lot! any help is appreciated
Below is my HTML code:

<div class = "container fluid">
<h1>You are currently in the city of:<h1> 
  <br>
<p id="city"></p>
<br>
<h1>Where the weather is:</h1>
<p id="weather"></p>
  <br>
<p id="temp"></p>
   
  <br>
 
  <div>
  <button class="btn btn-success" type="submit">Convert temperature to Celsius</button>
  </div>
</div>
  

and this is my JS:

$(document).ready(function(){
var lat;
var long;
var temp;
var celsius = Math.round(data.main.temp - 273);  
  if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
      
      lat = position.coords.latitude;
      long = position.coords.longitude;
      
      $("#location").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);

 //Create API with geolocation 
var weatherURL = "https://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=000"
    
      $.getJSON(weatherURL, function(data){
       $("#city").html(data.name); 
       $("#temp").html("Temperature: " + data.main.temp);
       $("#weather").html(data.weather[0].description);    
     
            });      
});
  }
  });


      
// celsius button 
// $.function button cel to f
// $.function button f to cel

//images switch stateements
    // if ("#weather".match = "sun") {
    //    $.getJSON("#image").show(<img src = " ">)

#2

I GOT IT TO WORK :smiley:
thank you anyway