Using a toggle to run a JS function that requires a json from a GET call

Question

I am struggling to use a toggle to convert my incoming Kelvin temperature to C and then to F. Currently it works to load the page as it defaults to Celsius, but when i toggle the function outside of locationLook runs and it doesnt have access to the temperature provided in the GET. Does anyone have a clue or resource that may help me with my dillema, i am trying to learn JS as someone new to programming. from what i can tell its a scope issue and the outer function doesnt have access to the json after its initial run.

http://codepen.io/CamMakoJ/pen/yemYyE?editors=1010

this is my HTML toggle button

F° C°

and this is my js function for switching from C to F based on the toggle:

    function factorClick(rawTemp) {
      if (document.getElementById("myCheck").checked == true) {
       //setup Celsius
       var temp = Math.round(rawTemp - 273.15);
       document.getElementById("temperature").innerHTML = temp + " °C";
       return rawTemp;
    } else {
     //setup farenheit
     var temp = Math.round((rawTemp - 273.15 * 1.8) + 32);
     document.getElementById("temperature").innerHTML = temp + " °F";
     return rawTemp;
    }

this is the function that GETS the json from the weather API and then updates the HTML:

    function locationLook(latitude, longitude) {
  var json = $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&appid=000000000000000000000000000", function(json) {
    console.log(json)
    var ktemp = json.main.temp
    factorClick(ktemp)
    icons(json)
    document.getElementById("description").innerHTML = json.weather[0].main;
    document.getElementById("location").innerHTML = json.name + ", " + json.sys.country;

  });
}

this is the toggle button
F° C°
– Cameron Johnston Feb 23 '16 at 18:39 — Cameron Johnston, Feb 23 '16 at 18:39

score 0 · Answer 1 · answered Feb 23 '16 at 18:41

You should store temperature outside of function at first. When your app starts getWeather() function is called and after it gets data from server you can set temperature in your weather object.

var weather = {};

function getWeather(position) {
     weather.temperature = 40; // data from api.openweathermap.org 
}

getWeather(myPosition)

And then make function which is called on click on toggle. And you can access temperature from your object -> (weather.temperature). Something like this:

toggle.addEventListener('click', function () {
    if (document.getElementById("myCheck").checked == true) {
        document.getElementById("temerature").innerHTML = Math.round(weather.temperature - 273.15) + " °C";

    } else {
        document.getElementById("temerature").innerHTML = Math.round((wether.temerature - 273.15 * 1.8) + 32) + " °F";
    }
}, false)

score 0 · Accepted Answer · edited May 23 '17 at 11:59

Issue

Initially you are passing ktemp as an argument to factorClick -

var ktemp = json.main.temp
factorClick(ktemp)

On click, factorClick is not passed the ktemp argument -

<input onclick='factorClick()' id="myCheck" type="checkbox" checked="true">F°<span class="toggle"

As such, when the input is clicked, the rawTemp argument in factorClick is undefined -

function factorClick(rawTemp) {

  if (document.getElementById("myCheck").checked == true) {
    //setup Celsius
    var temp = Math.round(rawTemp - 273.15);

  ...
}

Because operations with undefined return NaN, temp is not a number.

Solution

You are correct in that this is any issue of scope. Variable ktemp is currently locally scoped to the locationLook function. By defining ktemp in the global scope, ktemp can be referenced from within the scope of factorClick.

For example -

var ktemp;

//Location functions (gets run in geoSuccess)
function locationLook(latitude, longitude) {
  var json = $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&appid=0426deb1eeda2f667e8c4f40675474fe", function(json) {
    console.log(json)
    ktemp = json.main.temp
    factorClick()
    icons(json)
    document.getElementById("description").innerHTML = json.weather[0].main;
    document.getElementById("location").innerHTML = json.name + ", " + json.sys.country;

  });
}

...

function factorClick() {

  if (document.getElementById("myCheck").checked == true) {

    // Use global ktemp variable
    var temp = Math.round(ktemp - 273.15);

    document.getElementById("temperature").innerHTML = temp + " °C";
    return ktemp;
  } else {
    //setup farenheit
    var temp = Math.round((ktemp - 273.15 * 1.8) + 32);
    document.getElementById("temperature").innerHTML = temp + " °F";
    return ktemp;
  }
}

See What is the scope of variables in JavaScript? for more information.

Took me a while to get back to it, but awesome thanks so much! — Cameron Johnston, Mar 03 '16 at 02:52

Using a toggle to run a JS function that requires a json from a GET call

2 Answers2