C to F converter only works once - Weather App

JavaScript
1

Hello again, everyone,
I’m nearing the completion of my Weather App. Works just fine!
All but one thing… the Celsius to Fahrenheit switcher.

How does my program work in general: I send a GET request to the API url, get back an object containing several other objects inside, and put the data from it into the HTML elements. Even adding an icon from the object via .attr(‘src’, iconposition) worked.

To the problem: I have an empty ‘p’ element with an id of ‘currentWeather’ and a button with an id of ‘changeTemp’.
The object returned already contains both the temperatures in Celsius and Fahrenheit, under ‘temp_c’ and ‘temp_f’ keys in the ‘current’ sub-object - so no need to build a converter, as I thought. Here’s the code:

$('#changeTemp').on('click', function(){
        if($('#currentWeather').html(data.current.temp_c)) {
              $('#currentWeather').html(data.current.temp_f);
        } else if($('#currentWeather').html(data.current.temp_f)){
              $('#currentWeather').html(data.current.temp_c);
}

Let’s say I have 6 Celsius at the moment, press the changeTemp once and it switches to 42.8 Fahrenheit. That’s it, no further slamming on the button does anything. Why?
The html of ‘currentWeather’ now contains the value of data.current.temp_f, right? So why isn’t the second condition working? And the console shows no errors on button click.
I haven’t used neither data.pop() nor data.shift() on the object this time whenever I retrieve a value, so I couldn’t be cutting the value out of the object. Or could I?
It’s all inside one big function - so one big scope, no undefined or unknown variables possible. Made sure of that.

Really lost here. Thank you!

2

Can’t really troubleshoot well since I’m on my phone so not really sure if this is the problem but your elseif is missing a } and really an else would suffice. And you need a closing parantheses for the click function

1 Like
3

I was struggling for a while with this issues while working on my weather app and… I suggest You to refactor Your IF statement to something similar to this:
$temperature.html(($temperature).html() == tempC ? tempF: tempC);

So basically: first check if the value in a place with temperature equals to that from API, If so - change it to value in Fahrenheit (from other variable for example), if not - change it to Celsius value again.

You can check my codepen and look how I resolved this issue :slight_smile:

1 Like
4

I would apply a C or F class to the #currentWeather element and on click just test for hasClass and switch the temp accordingly

1 Like
5

Hi,
I only started learning recently and just finished Wikipedia Viewer, so I am no genius,
as @Dereje1 mentioned, else would suffice.
I think your else if statement might not be working because you have no operators in there

should in my opinion be

Anyway, I might be wrong.

The way I did it - I used a button with a value C/F and a switch statement using button.value.
Here’s my solution: https://codepen.io/akustomas/pen/KoRryd

1 Like
6

Just got back to it.
Thank you for your responses everyone!

@Dereje1 - I’ve just copied a piece of code from a larger function, and yes, missing in the copied piece is the closing ‘})’ for it. My bad. Yet it’s present in the app, so everything works in that regard.
@sorinr and @akustomas - tried applying a class and toggling/deleting and adding back/switching it, doesn’t seem to change much.
@icelandico - I went that route before, checking if the html has a certain value contained in it. The switch doesn’t seem to react to it at all. Not even the first time :frowning:

To sum up, the more different methods I try, the more I’m sure it’s either something elsewhere in my code (perhaps an asynchronous-related issue and my poor knowledge of how to properly use it, resulting in a non-working button on second press - the information not getting through?), or something wrong with the API… and I might have to scrap and start with another one.

I’ll just leave the link here, in case someone gets to it and can point to me what’s wrong. Careful - heavily documented, for my future forgetful self. https://codepen.io/AnSHLaGG/pen/geEVba

(Can extensive comments be the reason of a function not working? I already know my next self-project - a comment hider/eraser)

7

Now that I seen your code you can make it work with a slight modification, like a simple publicly declared Boolean switch, for example:

let celsius = true //by default flag is set to Celsius
$('#changeTemp').on('click', function(){
        if(celsius) {
              $('#currentWeather').html(data.current.temp_f);
              celsius = false //no longer Celsius 
        } else{
              $('#currentWeather').html(data.current.temp_c);
              celsius = true //set flag back to Celsius
        }
  })

This is just one way to do it, I encourage you to seek other ways too, like other users have hinted you can also set classes and use those classes to check the currently selected units by the user, but really they all boil down to the same idea, i.e. holding in memory the lastly selected temperature unit setting and then acting upon what is held in memory…

1 Like
8

@Dereje1 - a giant THANK YOU!
So far I’ve tried:

  • plain changing the .html() on .click();
  • creating a class on the ‘p’ / the button responsible for the data change, and applying toggleClass()/ addClass() + removeClass()/ switchClass() to it;
  • checking if the .html is == to the data it holds;
  • creating a new variable for the switch.

And out of all those, only yours, last option, works here! I’ll have to study why.