【解決方法】天気アプリのJavascriptの問題


現在地を取り込み、天気やその他の詳細を出力する Web サイトを作成しました。 私は open weather API を使用しましたが、すべての主要な機能は正常に動作します。 問題は副次的な部分です。

動作しない部分は次のとおりです。

温度に基づいて背景画像を変更する必要がありますが、それは起こりません。

温度を華氏から摂氏に変更するボタンが必要です。 ボタンをクリックすると、値が NaN に変更されます。

ここにへのリンクがあります codepen のプロジェクト

JavaScript コードは次のとおりです。

JavaScript
/*Create variables*/
var APPID = "56b64e7ce0164ffeb13f313ed0a8a007";
var temp;
var loc;
var icon;
var humidity;
var country;
var direction;
var description;

function update(weather) {
  icon.src = "http://openweathermap.org/img/w/" + weather.icon + ".png"
  humidity.innerHTML = weather.humidity;
  direction.innerHTML = weather.direction;
  loc.innerHTML = weather.location;
  temp.innerHTML = weather.temp;
  description.innerHTML = weather.description; 
   country.innerHTML = weather.country;

}

window.onload = function() {
  temp = document.getElementById("temperature");
  loc = document.getElementById("location");
  icon = document.getElementById("icon");
  humidity = document.getElementById("humidity");
  direction = document.getElementById("direction");
  description = document.getElementById("description");
country= document.getElementById("country");
  /* NEW */
  if (navigator.geolocation) {
    var showPosition = function(position) {
      updateByGeo(position.coords.latitude, position.coords.longitude);
    }
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    var zip = window.prompt("Could not discover your location. What is your zip code?");
    updateByZip(zip);
  }
  /*Below code is supposed to change background but doesn't work*/
 changeBK(temp);
}
/*function to change background*/
function changeBK(temp){
  if (temp < 45){
   document.body.style.backgroundImage = "http://wallpaperbeta.com/wallpaper/winter_snow_trees_calm_fog_landscapes_hd-wallpaper-354812.jpg";}
  else if ((temp > 45) &&(temp < 80)){
    document.body.style.backgroundImage ="http://www.spyderonlines.com/image.php?pic=/images/wallpapers/summer-wallpaper/summer-wallpaper-15.jpg";
  }else{
     document.body.style.backgroundImage = "http://blog.hdwallsource.com/wp-content/uploads/2014/12/desert-wallpaper-16490-17027-hd-wallpapers.jpg";
  }
}

function updateByGeo(lat, lon) {
  var url = "http://api.openweathermap.org/data/2.5/weather?" +
    "lat=" + lat +
    "&lon=" + lon +
    "&APPID=" + APPID;
  sendRequest(url);
}

function updateByZip(zip) {
  var url = "http://api.openweathermap.org/data/2.5/weather?" +
    "zip=" + zip +
    "&APPID=" + APPID;
  sendRequest(url);
}

function sendRequest(url) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.>= low && degrees < high) {
      console.log(angles[i]);
      return angles[i];
      console.log("derp");
    }
    low = (low + range) % 360;
    high = (high + range) % 360;
  }
  return "N";

}

function K2F(k) {
  return Math.round(k * (9 / 5) - 459.67);
}

function K2C(k) {
  return Math.round(k - 273.15);
}
/*Below code is supposed to change temperature to celcius but doesn't work. The output is NaN when button is clicked*/
function ctf() {
  var cel = (temp - 32) * 5/9;
    document.getElementById("temperature").innerHTML = parseInt(cel);
}

私が試したこと:

上記のコードを試しました。 そのほとんどは機能していますが、メイン コードに干渉しない唯一の部分は機能しています。

解決策 1

ローカル変数を使用する場合 temp、DOM 要素を参照しています。 ただし、それを数値のように使用しようとしています。 innerHTML. だからどちらかを使う

C#
temp = document.getElementById("temperature").innerHTML;

あなたのオンロード機能で、またはタック .innerHTML 参照する場所。

コメント

タイトルとURLをコピーしました