Can't get current metric value (Fahrenheit or Celsius)

Hey there.

That’s my Local Weather App link: Local Weather App

I’m trying to get the current metric value (Fahrenheit or Celsius) inside a element that was dynamically set by the first call of the getWeather() function. I would like to get the current value to compare if it’s F or C and then change it.

I’ve already tried to get the current value with the following methods:

  • $(’#unit’).val() - Returns empty
  • $(’#unit’).text() - Returns empty
  • $(’#unit’).html() - Returns empty
  • $(’#unit’).innerHTML - Returns undefined
  • $(’#unit’).innerText - Returns undefined

I’m not sure how to get the current value inside the unit element. I think that perhaps it’s because the value is dynamically defined, but I’m not sure. I did some research about it but I couldn’t find an answer to why it’s always returning empty or undefined.

Thank you all in advanced for your help.

I don’t see anything in your HTML with an id of unit. Once you have a div with an id of unit, then $('#unit').html() and $('#unit').text() will both work for what you want.

1 Like

It’s at line 13:

<p><a href="#" id="unit"></a></p>

Weird. I tried reloading, but it’s just not coming up. Is the pen saving?

That’s weird! It’s like the first code that I typed. I tried to save again the code at CodePen.

Anyway, that’s my code:

`






`

`function getWeather(lat, lon, units=“metric”){
var unit = “”;

if(units===“metric”) {
units="&units=metric";
unit = “°C”;
} else if (units===“imperial”) {
units="&units=imperial";
unit = “°F”;
}

$.ajax({
type: “GET”,
url: ‘http://api.openweathermap.org/data/2.5/weather?lat=’ + lat + ‘&lon=’+ lon + ‘&APPID=fb0c9d219bb4211211f7fc8c37acfcbc’ + units,
dataType: ‘json’,
success: function(data) {

    $("#unit").html(unit); 
    $("#temp").html(data.main.temp); 
  },
  error: function(err) { $(".data").html("Unable to get data"); },
  
});

}

function showWeather() {
var currentUnit = $(’#unit’).html();
//currentUnit = document.getElementById(‘unit’).textContent;

console.log(currentUnit);

$.ajax({
url: “http://ipinfo.io/json”,
dataType: ‘json’,
success: function(results){
getWeather(results.loc.split(’,’)[0], results.loc.split(’,’)[1]);
},
error: function() {
console.log(“Can’t reach IPInfo.”)
}
});
}

$(document).ready(function() {
var units = “metric”;

showWeather();

$(’.unit’).on(‘click’, showWeather);

});
`

Lots of stuff has appeared now! What I noticed is that on line 49 you’ve got

$('.unit').on('click', showWeather);

which wouldn’t do anything because that’s trying to get an element with a class of unit. Changing this to

$('#unit').on('click', showWeather);

Made it work as expected, and I’m seeing unit’s content in the console.

Thank you! I really missed this one.

But unfortunately I’m still getting an empty value at line 27 on my JS code. I’ve tried with both Chrome and Firefox. I’m expecting to get the units content with $('#unit').text() .

Did you try clicking on the #unit link? You won’t see it right after page load - that blank line is because you call console.log($('#unit').text()) before the AJAX call is made. When you click on the unit, it’ll show you the element’s contents before making another AJAX call.

1 Like

Yes! Now I get it! Thank you so much! =D

1 Like