Member 12612126 Ответов: 1

Проблема Javascript с погодным приложением


Я создал веб-сайт, который принимает ваше текущее местоположение и выводит погоду и некоторые другие детали. Я использовал Open weather API, и все основные вещи работают нормально. Проблема заключается во вторичных частях.

Части, которые не работают:

Мне нужно изменить фоновое изображение в зависимости от температуры, но этого не происходит.

Мне нужна кнопка, которая меняет температуру от Фаренгейта до Цельсия. Значение изменяется на NaN, когда я нажимаю на кнопку.

Вот ссылка на проект по codepen

Вот код 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);
}


Что я уже пробовал:

Попробовал выше код. Большая часть его работает, но единственные части, которые не работают, не мешают основному коду.

Sergey Alexandrovich Kryukov

Вот ключевое слово: отладчик.
—СА

1 Ответов

Рейтинг:
9

Peter_in_2780

Когда вы используете свою локальную переменную temp, вы ссылаетесь на элемент DOM. Однако вы пытаетесь использовать его так, как если бы это было числовое значение innerHTML. Так что либо используйте

temp = document.getElementById("temperature").innerHTML;
в функцию onload, или лавировать на .innerHTML там, где вы ссылаетесь на него.


Member 12612126

Спасибо, что он исправил эту проблему. Что мне делать с тем фактом, что фон не меняется?

Peter_in_2780

Вам не хватает url(). Видишь http://www.w3schools.com/jsref/prop_style_backgroundimage.asp
Если, конечно, вы и здесь исправили "темп".