This is my first ever question to be posted on this forum. After 5 days of trying on my own to figure out and trying to get to work ~ but still couldn’t.
When clicking on Celsius Degree Temp, it changes from Celsius to Fahrenheit : This part is done
But
when clicking Fahrenheit Degree Temp <<<= It’s NOT converting back to Celsius!!!
This is the linke to my code:
Please have a look and let me know what I did wrong here. Please also show me how I can make it work.
Your temperature first updates the span with id=“temp” within the updateWeatherData function in the following code:
$("#temp")
.html(cTemp) // this is the line that updates the span text with ctemp
.click(function() { // this creates a click event, so that when ever the span is clicked, it will only show fTemp
$("#temp").html(fTemp);
});
Read my second comment above which pertains to the .click method used. This is why it never turns back to Celsius.
The following if statement will always evaluate to true:
if ($("#temp").html(fTemp)) {
Why? Because $("#temp").html(fTemp)) is a jQuery object and all objects are “truthy”, so they get evaluated as true when used inside an if statement condition.
Can you please explain what you were you expecting the following code to do? Better yet, explain in plain language what you would like the if/else statement to do and I will try to give you a hint.
if ($("#temp").html(fTemp)) {
console.log("if");
} else {
return $("#temp").html(cTemp);
}
You need a variable which keeps track of which unit is currently showing. Since you display cTemp first, then could use a variable like showingCelsius and initialize it to true. Then your if statement would check if showingCelsius is equal to true. If it is, then you want to do two things:
display fTemp
change showCelsius to false
If showingCelsius is equal to false, then you want to do two things:
Now I need to figure out the way to do it all in Javascript with no jQuery hopping that it will work this time
Could you please explain why initialising a new variable in this case is needed? Or may be can you explain how JS works in a way that a new variable is needed in a case like this?
I’m just curious, and I think it’d be important to know in order to work on other projects to come.
The extra variable is needed, because you need something to track which value you are currently displaying in order to know which other value to display. It has nothing to do with JavaScript, but instead on the algorithm needed to solve the problem. There might be another way without creating the extra variable, but this solution is the most typical.
Also, make sure to initialize showCel inside the document.ready callback function and not locally to the span click event, because if you initialize it inside the span click event, then it will always be true.
Once you have correctly initialized showCel as I describe above, you could use either of the following to make the toggle work:
$("#temp")
.html(cTemp) // this is the line that updates the span text with ctemp
.click(function() {
var currTemp = cTemp; // assumes cTemp will be displayed unless cTemp is already being displayed
if (showCel)) {
currTemp = fTemp;
}
$("#temp").html(currTemp);
showCel = !showCel;
});
// OR
$("#temp")
.html(cTemp) // this is the line that updates the span text with ctemp
.click(function() {
var currTemp = showCel ? fTemp : cTemp; // using the ternary operator
$("#temp").html(currTemp);
showCel = !showCel;
});
THANK YOU!!! YOU SAVED MY LIFE!!! (AND MY WEATHER APP TOO)
Yesterday was in fact hopeless day, for my Weather App bugstuck was far from over.
Now it’s working!!! ~ such a miracle indeed!!!
I finally get to move on to other projects - Thank you so so much
p.s. I’m moving on to other projects, but of course I’m coming back to make the new version of this and other projects. So please feel free to comment, give suggestions, for further improvement
