Hi guys,
I have a problem.
Working since hours on my weather app. It’s now getting the weather based on the users location. The last part of the puzzle is to change F to C. But it’s not working. I’m now at the point where I’m stuck since hours and google etc. didn’t help me out.
I try to explain it to you now:
At first here is my codepen: https://codepen.io/GeraltDieSocke/pen/yzJrBg
My idea was to set up a function which takes a temperature. In this function there is a onclick method for the temperature
tag on the site.
Then I also added a global variable on top var fahrenheit = true
.
So it’s defaulted to true.
The function itself looks as followed (I left comments to make my intentions clear):
function changeMetric(temperature) {
// save the temperature in the method just for safety
var temp = temperature;
// select the temperature p tag and add on click function
$(".temperature").on("click", function() {
//check if fahrenheit is true and if yes apply the formula
if(fahrenheit === true) {
// convert to Celsius
temp = Math.round(temp * 9 / 5 + 32);
// update p tag with the new temp + C
$(".temperature").text(temp + "°C");
// set the variable to false for the next click so the "else" can triger
fahrenheit = false;
} else {
//convert to fahrenheit
temp = Math.round((temp -32) * 5 / 9);
// same as above
$(".temperature").text(temp + "°F");
fahrenheit = true;
}
// console log for checking. The Console log looks like this:
// when the first click happens (starting value of 55F)
// NaN false
// 13 true
// second click on p tag:
// NaN false
// -11 true
console.log(temp, fahrenheit);
});
}
So as you can see in my comments this is he weird console output. It also changes the values in the p tag to this weird numbers.
So first click => 13°F
Second click => -11°F
… it stops after 8 clicks and -39°F
So where is my big mistake? Now you wonder when do I call the function and pass in the method?
In my getWeather function at the end after everything is updated:
changeMetric(temperature);
(see also in the codepen).
Now the question: Is a click event always listening and always gets called on a click?. Because the click event is inside this function. So how does this work and can I do this? Is it still listening altough it’s inside another function which first has to be “called” ?
Please help me out here I think I made some big mistakes.
Help very much appreciated
Thanks guys!!