Problem with local weather zipline

JavaScript
1

I am trying to do the local weather project, but am unable to display the weather icon image. My html code is:

<img id="imageid"  alt="Card image" target="_blank">

and my javascript code is:

  var xcoord;
var ycoord;
var icon;

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
  xcoord = position.coords.longitude;
  ycoord = position.coords.latitude;
console.log ("the x coord is: ", xcoord, " and the y coord is: ", ycoord);
  $.getJSON("https://fcc-weather-api.glitch.me/api/current?lon=" + xcoord + "&lat=" + ycoord, function(json) {
  $(".message").html(JSON.stringify(json));
    var tempcel = json.main.temp;
    var tempfah = Math.round(1.8 * tempcel + 32);
    var windspeedkts = json.wind.speed;
    var conditions = json.weather[0].description;
    var city = json.name;
    var country = json.sys.country;
    icon = json.weather[0].icon;
    console.log('the Temp is ', tempcel, "C or ", tempfah, "F");
    console.log('the wind speed is ', windspeedkts, " knots");
    console.log('the weather is ', conditions);
    console.log('the location is ', city, " in ", country);
    console.log("the weather icon is: ", icon);
    document.getElementById("loc").innerHTML = "The current weather for " + json.name + " in " + json.sys.country + " is " + json.weather[0].description + ", the Temp is " + tempfah + " and the wind speed is " + json.wind.speed + " knots.";
    document.getElementById("winds").innerHTML = "The current wind speed is " + json.wind.speed + " knots.";

   document.getElementById("imageid").src = icon;
      });
  
 
});
}
2

Well, is it getting set?

3

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

4

Hi!

the problem is in this two lines

document.getElementById("loc").innerHTML = "The current weather for " + json.name + " in " + json.sys.country + " is " + json.weather[0].description + ", the Temp is " + tempfah + " and the wind speed is " + json.wind.speed + " knots.";
document.getElementById("winds").innerHTML = "The current wind speed is " + json.wind.speed + " knots.";

Try it, put the code in this order.
First set the “src” in the image, and after you alter the others ids.
Remeber to create the elements.

document.getElementById("imageid").src = icon;
document.getElementById("loc").innerHTML = "The current weather for " + json.name + " in " + json.sys.country + " is " + json.weather[0].description + ", the Temp is " + tempfah + " and the wind speed is " + json.wind.speed + " knots.";
document.getElementById("winds").innerHTML = "The current wind speed is " + json.wind.speed + " knots.";

The problem is : you didn’t create the elements to ids “loc” and “winds”, when you use the function getElementById to look the id “loc”, the function throw a exception and don’t execute the line

document.getElementById("imageid").src = icon;

:+1:

5

Thank you so much!!
Your solution worked and your explanation makes sense.
I was stuck on this for some time, now I am unstuck!
Matt

1 Like
6

Thank you for the heads up.

Matt