Weird Little Problem With °C/°F Button [Solved]

Weird Little Problem With °C/°F Button [Solved]
0

#1

Ok, so everything is working except when I click the button to change between C and F, it Does change the C and F but the actual temperature number disappears EVEN THO you can clearly see it displaying/changing correctly in the console :smiley: super confused! Can anyone spot why it doesn’t work? http://codepen.io/cytronix/pen/BLyWNN


#2

You’re defining result only for converting from centigrade to Fahreheit:

$("#button").click(function(){
  if(state === 0){

    //result is defined here
    var result = Math.round((cent * 1.8) + 32);
    $("#temp").html(result);
    console.log(result);
    $("#cf").html(" °F");
    state = 1;

  } else if (state === 1){

    //**but what about here?**
    $("#temp").html(cent);
    console.log(cent);
    $("#cf").html(" °C");
    state = 0;
  }
});

EDIT: Ok problems I notice:

  1. The ajax isn’t working, so ‘cent’ is never even given a value. This might be my browser or an API issue I’m not sure.
  2. p#cf is the parent of span#temp. So when you are using the $.html() method from JQuery you remove ALL of the inner HTML of p#cf…which includes span#temp. So yeah…

Now, I’m not going to go into fixing the API yet but I can get your temperature working. Assigning cent a value of 50 for test purposes and then use this:

var state = 0;
$("#button").click(function(){
  console.log(cent);
  //There's no need to bother with another variable,
  //just use cent as temperature.

  if(state === 0){
       //Convert to Fahreheit
       cent = Math.round((cent * 1.8) + 32);
      //I'm adding cent to cf. You can actually still
      //use a span by putting '<span id="temp">'+cent+'</span>'
      //instead if you need it
       $("#cf").html(cent);

       console.log(cent);
       
       //Appending the Fahreheit symbol to #cf
       //instead of overwriting with html()
       $("#cf").append(" °F");
       state = 1;

  } else if (state === 1){
       //You forgot to convert back to Celsius
       cent = Math.round((cent-32)/1.8);
       $("#cf").html(cent);
       console.log(cent);
       $("#cf").append(" °C");
       state = 0;
  }
});

#3

I too can’t understand why it doesn’t work.But one thing that I noticed was, that if you don’t nest elements having one ID inside other then it works.
so instead of this,

`

location

0 °C

`

if you change the markup to this,

<p><span id="temp">0</span><span id="cf"> °C</span></p>

it works but I too am new so I don’t know why this is happening.Why can’t I access inner ID elements


#4

When you request to the api and get the json,the data persists as long as the webpage exists.so, you can access the celsius temperature just by calling the the “var cent” that was used to store the celsius temperature. no need to convert ,just check the state variable to find out what is the display unit and change accordingly


#5

You got it! I changed that one line and now it works perfectly :slight_smile: It is weird that it didn’t work before tho huh? I mean I changed it to the current temp using the api but couldn’t change it via the click listener? Really odd. Oh well! Lessons learned, thank you everyone! :slight_smile:


#6

Is it actually working now? The API fetch still doesn’t occur for me.


#7

Works great for me :slight_smile: Might be your browser? See if you can see other ppls weather apps working correctly :slight_smile:


#8

Yeah, sorry I realized you’re using a HTTP link, so I had to use Codepen in HTTP instead of HTTPS.
I really like the icons, never could find the right ones when I was doing this project.
Also, I was really off about what the problem was, sorry for the ridiculously long reply earlier.


#9

Haha no worries dude, I appreciate you taking the time to offer your help :slight_smile: That’s what matters. And yeah, Skycons are adorable :smiley: easy to implement too


#10

oh,now I see it, when the html is changed for p#cf the whole inner-html gets changed,so there’s not span with temp id to work with. but in my solution since they are not nested changing one doesn’t change the other,hence it works.


#11

Ohhhh of course, the inner span got removed. Lol seems obvious now :slight_smile: