Hi All,
I’m scratching my head at this one. Basically the document loads with empty fields for Temperature and Degrees symbol, which I update with jQuery after user clicks “Get Weather Data”. The problem comes when I try to reference the html of the Temperature field. I had changed the html with jQuery to reflect the JSON data from API, but when I try to check the value of #temp in the console, it returns “function()” (not a number as I would expect). Please take a look and let me know what you think!
Here is the code for updating temp field when Degrees field is clicked:
$("#degrees").click(function(){
var degreesC = temp; //temp is storing data from JSON
var degreesF = ((temp * 9/5) + 32);
var degrees = $("#degrees").html;
console.log($("#degrees").html);
console.log($("#degrees").text);
if (degrees == "° <a>C</a>"){ //#temp is in Celsius
$("#temp").html(degreesF);
$("#degrees").html("° <a>F</a>");
}
else if (degrees == "° <a>F</a>"){//should mean that #temp is in Fahrenheit
$("#temp").html(degreesC);
$("#degrees").html("° <a>C</a>");
}
});
I had originally tried checking what the value of #temp was and comparing that to variable temp, but ran into the same problem. Here is link to the full CodePen: https://codepen.io/hburn11/pen/WEyLGp
Thanks so much!