天气应用程序的Javascript问题 [英] Javascript problem with weather app

问题描述

我创建了一个网站，其中包含您当前的位置并输出天气和其他一些细节。我使用了开放天气API，所有主要功能都很好。问题在于次要部分。



不起作用的部件是：



我需要更改基于的背景图像温度，但不会发生。



我需要一个按钮，将温度从华氏温度变为摄氏温度。单击按钮时，该值将更改为NaN。



以下是有关codepen项目的链接



以下是JavaScript代码：

I created a website that takes in your current location and outputs the weather and some other details. I used the open weather API and all the main things work fine. The problem is with the the secondary parts.

The parts that don't work are:

I need to change the background image based on the temperature but that doesn't happen.

I need to have a button that changes the temperature from Fahrenheit to Celsius. The value gets changed to NaN when I click on the button.

Here is the link to the project on codepen

Here is the JavaScript code:

/*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);
}

我的尝试：



试过上面的代码。其中大部分都在工作，但唯一不会干扰主代码的部分。

What I have tried:

Tried above code. Most of it is working but the only parts that aren't don't interfere with the main code.

推荐答案

使用本地变量时 temp ，您正在引用DOM元素。但是，您尝试使用它，就好像它是 innerHTML 的数值一样。所以要么使用

When you use your local variable temp, you are referencing the DOM element. However you are trying to use it as if it was the numeric value of the innerHTML. So either use

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

在您的onload函数中，或者在 .innerHTML 中引用它。

in your onload function, or tack on .innerHTML where you reference it.

这篇关于天气应用程序的Javascript问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！