这是一个范围问题。

Question

我正在使用Openweathermap API构建天气应用程序。该应用程序已经工作，但我有温度转换器的问题仍然无法正常工作。

这是我的HTML：

   <div class='valign col s6 text-style'>
       <div id="iconTemp">
           <div id="icon"></div>
           <div id="temp"></div>
       </div>  
       <div class='divider'></div><br>

       <div class="text-style-details">
           <div class="location"></div>
           <div id="conditions"></div>
           <div id="wind"></div>
       </div>  
   </div>

我的javascript：

 <script type="text/javascript">
      function ToC() {
        var strIn = parseInt(temperature);

        if(isNaN(strIn)) {
          alert("Not a Number");
        } else {
          var f = parseFloat(strIn);
          var c = (f - 32) * 5/9;

          var r = Math.round(c * 100)/100;
          parseInt(temperature) = r.toString();   
        }
    }

    function ToF() {
        var strIn = parseFloat((temperature).toFixed(1));

        if(isNaN(strIn)) {
          alert("Not a Number");
        } else {
          var c = parseFloat(strIn);
          var f = (c * 9/5) + 32;

          var r = Math.round(f * 100)/100;
          parseFloat((temperature).toFixed(1)) = r.toString();   
        }
    }

$(document).ready(function() {

    getLocationData();

    function getLocationData() {
      $.get("http://ipinfo.io", function(location) {
        console.log(location);

        $('.location')
          .append(location.city + ", ")
          .append(location.region);

        var units = getUnits(location.country);
        getWeatherData(location.loc, units);

      }, "jsonp");

    }

    function getWeatherData(loc, units) {
      lat = loc.split(",")[0]
      lon = loc.split(",")[1]

      var appid = "&APPID=123456abcde"

      var url = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + "&units=" + units + appid;

      console.log(url);

      $.get(url, function(weather) {
        var windDir = WindDirection(weather.wind.deg);
        var temperature = weather.main.temp;
        var unitLabel;

        if (units === "imperial") {
          unitLabel = "<a href='#'>F</a>/<a href='#' onclick='ToC()'>C</a>";
          // temperature = parseFloat((temperature).toFixed(1));
        } else {
          unitLabel = "<a href='#' onclick='ToF()'>C</a>";
          // temperature = parseInt(temperature);
        }

        // temperature;

        // temperature = parseInt(temperature);
        // temperature = parseFloat((temperature).toFixed(1));



        console.log(weather);

        $('#icon')
          // .append("<img src='http://openweathermap.org/img/w/" + weather.weather[0].icon + ".png'>");
          .append("<i class='wi wi-owm-"+weather.weather[0].id+"'></i>");
                   // <i class="wi wi-owm-200"></i>

        $('#temp').append(temperature + "&deg; " + unitLabel);
        $('#conditions').append(weather.weather[0].description);
        $('#wind').append(windDir + " " + weather.wind.speed + " knots");

      }, "jsonp");

    };



    function WindDirection(dir) {
      var rose = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
      var eightPoint = Math.floor(dir / 45);
      return rose[eightPoint];
    }

    function getUnits(country) {
      var imperialCountries = ['US', 'ID', 'SG', 'MY', 'BS', 'BZ', 'KY', 'PW'];

      if (imperialCountries.indexOf(country) === -1) {
        var units = 'metric';
      } else {
        units = 'imperial';
      }

      console.log(country, units);
      return units;
    }

  });
</script>

app pict：

我创建了函数ToC（将F转换为C）和ToF（将C转换为F），当我单击标签时，我收到错误消息“未捕获的ReferenceError：ToC未定义”。我希望当我点击 C （celcius）和 F （华氏度）时，应用温度值会发生变化。

非常感谢任何帮助，谢谢。

Answer 1

虽然为培训编写这些功能总是很好，但根据openweathermap API单位转换支持回答你的主要问题：

您可以将&units=metric传递给您的API调用，以获得摄氏温度，如下所示：

api.openweathermap.org/data/2.5/weather?lat=LATITUDE&lon=LONGITUDE&units=metric&APPID=YOUR_API_KEY

以下是官方documentation的一些信息：

单位格式   描述：标准，公制和英制单位可用。

参数：的

单位公制，英制。如果不使用units参数，则格式为   标准默认。

温度以华氏温度，摄氏温度和开尔文温度为单位。

对于摄氏温度，使用单位=公制温度   华氏度使用单位=帝国

API调用示例：

标准api.openweathermap.org/data/2.5/find?q=London

指标api.openweathermap.org/data/2.5/find?q=London&units=metric

帝国   api.openweathermap.org/data/2.5/find?q=London&units=imperial

Answer 2

这是一个范围问题。

var temperature正在定义内部无名函数里面 $ .get 里面 getWeatherData 里面另一个无名功能里面 $（文件）.ready（）！
这比你用ToF或ToC读到的深度要高6级

简单来说：您可以访问在此范围或父范围内声明的所有变量。

JavasScript范围here (stackoverflow)

有一个很好的解释

的解决方案：

全局变量：
1. 在var temperature = 0;
2. 从var
3. 要使用onclick()，请在<script src="[your-js-file]">内写下<head>。
更改功能的范围：
1. 将ToC和ToF函数声明放在$.get(url, function(){ [HERE] });范围内
2. 删除onclick='ToC()'，它不再有效。 （与ToF相同）
3. 向<a href="#">F</a>添加ID，例如：id="toggle-unit-btn" （与ToF相同）
4. 在$('#toggle-unit-btn').on('click', ToC);范围
传递并返回函数值： [推荐]
1. 将输入和输出参数添加到ToC和ToF

function ToC(temp) { // INPUT
  var strIn = parseInt(temp); 
  // note that I changed all temperature instances 
  // to instances of the parameter temp [could have any name]

  if(isNaN(strIn)) {
    alert("Not a Number");
  } else {
    var f = parseFloat(strIn);
    var c = (f - 32) * 5/9;

    var r = Math.round(c * 100)/100;
    temp = parseInt(r.toString()); // fix this line for any solution!
  }
  return temp; // OUTPUT
}

删除onclick='ToC()'，它不再有效。 （与ToF相同）
向<a href="#">F</a>添加ID，例如：id="toggle-unit-btn" （与ToF相同）
在$('#toggle-unit-btn').on('click',function(){temperature = ToC(temperature);});范围内添加点击事件处理程序
$.get(url, function(){ [HERE] });（（请注意，它与之前的解决方案不同，因为它需要通过<接收温度）

使用openweathermap API进行温度转换

2 个答案:

这是一个范围问题。

的解决方案：