[ad_1]
現在地を取り込み、天気やその他の詳細を出力する 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
参照する場所。
[ad_2]
コメント