Question

我正在努力使用切换来将我的传入开尔文温度转换为C然后转换为F.目前它可以加载页面，因为它默认为Celsius，但是当我在locationLook外部切换函数时它没有运行获得GET中提供的温度。有没有人有线索或资源可以帮助我治疗我的dillema，我正在努力学习JS作为编程新手。从我可以告诉它的范围问题，外部函数在初始运行后无法访问json。

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

这是我的HTML切换按钮

F°C°

这是我的js函数，用于根据切换键从C切换到F：

    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;
    }

这是从天气API获取json然后更新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;

  });
}

Answer 1

首先应将温度存储在功能之外。当你的应用程序启动时，调用getWeather（）函数，在从服务器获取数据后，你可以在天气对象中设置温度。

var weather = {};

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

getWeather(myPosition)

然后创建在点击切换时调用的函数。您可以从对象访问温度 - ＆gt; （weather.temperature）。像这样：

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)

Answer 2

<强>问题

最初，您将ktemp作为参数传递给factorClick -

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

点击后，factorClick未传递ktemp参数 -

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

因此，单击输入时，rawTemp中的factorClick参数未定义 -

function factorClick(rawTemp) {

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

  ...
}

由于undefined的操作返回NaN，temp不是数字。

<强>解决方案

你是对的，这是范围的任何问题。变量ktemp目前在本地作用于locationLook函数。通过在全局范围内定义ktemp，可以在ktemp的范围内引用factorClick。

例如 -

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;
  }
}

有关详细信息，请参阅What is the scope of variables in JavaScript?。

使用切换来运行需要来自GET调用的json的JS函数

2 个答案: