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

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

本文关键字：GET 调用 json 函数 JS 运行      更新时间：2023-09-26

我正在努力使用切换将传入的开尔文温度转换为 C，然后转换为 F.目前它可以加载页面，因为它默认为摄氏度，但是当我在 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;
  });
}

问题

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

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

单击时，factorClick不会传递ktemp参数 -

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

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

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

因为undefined运算返回NaN，temp不是一个数字。

溶液

您是正确的，因为这是范围的任何问题。变量ktemp当前在本地作用域为 locationLook 函数。通过在全局范围内定义ktemp，可以从 factorClick 的范围内引用ktemp。

例如-

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

有关更多信息，请参阅 JavaScript 中变量的作用域是什么？

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

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

然后制作在单击切换时调用的函数。您可以从对象访问温度 ->（天气.温度）。像这样：

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)
相关文章：