I have the temperature toggling to F from C when the user clicks on the C, however it won’t toggle back when the user clicks on the F. Here is a link to my Code Pen: https://codepen.io/sanskrtapanditah/pen/qozxOG
Here is my code for that section:
$(".scale").on("click", function() {
if (tempInCelsius) {
$(".temperature").html(tempInFahrenheit + tempFormat);
$(".scale").html("F");
} else {
$(".temperature").html(tempInCelsius + tempFormat);
$(".scale").html("C");
}
});
Thanks in advance for any advice.
Have a look at your if statement. tempInCelsius
is just a number so it will always return true (unless it is 0), so you always show the temperature in Fahrenheit.
You could add a variable showTempInCelsius
which you initially set to true and then do something like this:
$(".scale").on("click", function() {
if (showTempInCelsius) {
$(".temperature").html(tempInFahrenheit + tempFormat);
$(".scale").html("F");
} else {
$(".temperature").html(tempInCelsius + tempFormat);
$(".scale").html("C");
}
showTempInCelsius = !showTempInCelsius;
});
It worked after I made those changes. Thank you!