如何实现自动更新的天气预报?
How to implement a weather forecast with automatic updates?
请帮忙,目前我有一个错误`TypeError: weather.sys is undefined。
我使用 Open Weather Map。
我希望每个街区都能根据城市自动更新日期、水温和气温。
我必须马上说地理定位将集中在俄罗斯
我很高兴得到你的回答。
const api = {
key: "11c85ec89d2ab590110511a07349dd25",
baseurl: "https://api.openweathermap.org/data/2.5/"
}
const weather__wrapper = document.addEventListener('DOMContentLoaded', setQuery);
var check = document.querySelector('.weather__city').textContent;
function setQuery(evt) {
const wrappers = document.querySelectorAll('.weather__wrapper');
wrappers.forEach( w => {
var city = w.querySelector('.weather__city');
getResults(city);
});
}
function getResults (query) {
fetch(`${api.baseurl}weather?q=${query}&units=metric&APPID=${api.key}`)
.then(weather=> {
return weather.json();
}).then(displayResults);
}
function displayResults(weather) {
console.log(weather);
let city = document.querySelectorAll('.weather__text .weather__city');
city.innerText = `${weather.name}, ${weather.sys.country}`;
let now = new Date();
let date = document.querySelector('.weather__text .weather__date');
date.innerText = dateBuilder(now);
}
function dateBuilder(d) {
let months = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
let date = d.getDate();
let month = months[d.getMonth()];
let year = d.getFullYear();
return `${date}.${month}.${year}`;
}
.weather__wrapper {
height: 186px;
width: 355px;
border-radius: 5px;
background-color: #e4e8ef;
padding: 24px 24px 24px 24px;
margin-left: 30px; /* убрать */
}
.weather__icon {
float: left;
margin-top: 26px;
}
.weather__icon i {
color: #fab165;
font-size: 5.938em;
}
.weather__text {
float: right;
}
.weather__city { /* Локация, на видел input */
font-weight: 400;
font-size: 1.500em;
margin-bottom: 0!important;
}
.weather__temperature {
font-weight: 800;
font-size: 1.500em;
margin-bottom: 0!important;
}
.weather__date {
font-size: 1.250em;
font-weight: 200;
margin-bottom: 0!important;
}
.slide-weather__items {
display: flex;
outline: none;
}
.slide-weather {
margin-bottom: 100px;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="slide-weather">
Hello
<div class="slide-weather__items">
<div class="weather__wrapper">
<!-- weather on video -->
<div class="weather__icon"><i class="fas fa-sun"></i></div>
<div class="weather__text">
<p class="weather__city sochi">Sochi</p>
<div class="weather__current-temp">
<p class="weather__temperature">+23<sup>o</sup>C - air</p>
</div>
<div class="weather__water">
<p class="weather__temperature">+23<sup>o</sup>C - water</p>
</div>
<p class="weather__date">29.05.2020</p>
</div>
</div>
<div class="weather__wrapper">
<!-- weather on video -->
<div class="weather__icon"><i class="fas fa-sun"></i></div>
<div class="weather__text">
<p class="weather__city">Novorossiysk</p>
<div class="weather__current-temp">
<p class="weather__temperature">+23<sup>o</sup>C - air</p>
</div>
<div class="weather__water">
<p class="weather__temperature">+23<sup>o</sup>C - water</p>
</div>
<p class="weather__date">29.05.2020</p>
</div>
</div>
<div class="weather__wrapper">
<!-- weather on video -->
<div class="weather__icon"><i class="fas fa-sun"></i></div>
<div class="weather__text">
<p class="weather__city">Gelendzhik</p>
<div class="weather__current-temp">
<p class="weather__temperature">+23<sup>o</sup>C - air</p>
</div>
<div class="weather__water">
<p class="weather__temperature">+23<sup>o</sup>C - water</p>
</div>
<p class="weather__date">29.05.2020</p>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/weather.js"></script>
</body>
</html>
发生这种情况是因为您将整个标签作为城市名称而不是 innerHTML 传递:
getResults(city.innerHTML);
您收到 weather.sys 错误,因为天气变量不包含任何数据。所以你应该在 displayResults 函数中或调用它之前添加一些错误处理。
编辑:添加温度更新:
var parent = document.querySelector('.' + weather.name.toLowerCase()).parentNode
parent.querySelector('.weather__current-temp .weather__temperature').innerHTML = Math.round(weather.main.temp) + '<sup>o</sup>C - air';
这段代码很丑陋,但这只是它应该如何工作的一个例子。您应该将 temperature html 建筑物和父搜索移到一个单独的函数中。如果所有 weather__city 元素都具有城市 类,这将起作用。
如果您不想添加城市 类 并且想通过 innerText 搜索父级,请查看此答案:How to get element by innerText
它是这样工作的:
const api = {
key: "11c85ec89d2ab590110511a07349dd25",
baseurl: "https://api.openweathermap.org/data/2.5/"
}
const weather__wrapper = document.addEventListener('DOMContentLoaded', setQuery);
var check = document.querySelector('.weather__city').textContent;
function setQuery(evt) {
const wrappers = document.querySelectorAll('.weather__wrapper');
wrappers.forEach( w => {
var city = w.querySelector('.weather__city');
getResults(city.innerHTML);
});
}
function getResults (query) {
fetch(`${api.baseurl}weather?q=${query}&units=metric&APPID=${api.key}`)
.then(weather=> {
return weather.json();
}).then(displayResults);
}
function displayResults(weather) {
let city = document.querySelectorAll('.weather__text .weather__city');
city.innerText = `${weather.name}, ${weather.sys.country}`;
let now = new Date();
let date = document.querySelector('.weather__text .weather__date');
date.innerText = dateBuilder(now);
document.querySelector('.' + weather.name.toLowerCase()).parentNode.querySelector('.weather__current-temp .weather__temperature').innerHTML = Math.round(weather.main.temp) + '<sup>o</sup>C - air';
}
function dateBuilder(d) {
let months = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
let date = d.getDate();
let month = months[d.getMonth()];
let year = d.getFullYear();
return `${date}.${month}.${year}`;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="slide-weather">
Hello
<div class="slide-weather__items">
<div class="weather__wrapper">
<!-- weather on video -->
<div class="weather__icon"><i class="fas fa-sun"></i></div>
<div class="weather__text">
<p class="weather__city sochi">Sochi</p>
<div class="weather__current-temp">
<p class="weather__temperature">+23<sup>o</sup>C - air</p>
</div>
<div class="weather__water">
<p class="weather__temperature">+23<sup>o</sup>C - water</p>
</div>
<p class="weather__date">29.05.2020</p>
</div>
</div>
<div class="weather__wrapper">
<!-- weather on video -->
<div class="weather__icon"><i class="fas fa-sun"></i></div>
<div class="weather__text">
<p class="weather__city novorossiysk">Novorossiysk</p>
<div class="weather__current-temp">
<p class="weather__temperature">+23<sup>o</sup>C - air</p>
</div>
<div class="weather__water">
<p class="weather__temperature">+23<sup>o</sup>C - water</p>
</div>
<p class="weather__date">29.05.2020</p>
</div>
</div>
<div class="weather__wrapper">
<!-- weather on video -->
<div class="weather__icon"><i class="fas fa-sun"></i></div>
<div class="weather__text">
<p class="weather__city gelendzhik">Gelendzhik</p>
<div class="weather__current-temp">
<p class="weather__temperature">+23<sup>o</sup>C - air</p>
</div>
<div class="weather__water">
<p class="weather__temperature">+23<sup>o</sup>C - water</p>
</div>
<p class="weather__date">29.05.2020</p>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/weather.js"></script>
</body>
</html>
请帮忙,目前我有一个错误`TypeError: weather.sys is undefined。 我使用 Open Weather Map。 我希望每个街区都能根据城市自动更新日期、水温和气温。 我必须马上说地理定位将集中在俄罗斯 我很高兴得到你的回答。
const api = {
key: "11c85ec89d2ab590110511a07349dd25",
baseurl: "https://api.openweathermap.org/data/2.5/"
}
const weather__wrapper = document.addEventListener('DOMContentLoaded', setQuery);
var check = document.querySelector('.weather__city').textContent;
function setQuery(evt) {
const wrappers = document.querySelectorAll('.weather__wrapper');
wrappers.forEach( w => {
var city = w.querySelector('.weather__city');
getResults(city);
});
}
function getResults (query) {
fetch(`${api.baseurl}weather?q=${query}&units=metric&APPID=${api.key}`)
.then(weather=> {
return weather.json();
}).then(displayResults);
}
function displayResults(weather) {
console.log(weather);
let city = document.querySelectorAll('.weather__text .weather__city');
city.innerText = `${weather.name}, ${weather.sys.country}`;
let now = new Date();
let date = document.querySelector('.weather__text .weather__date');
date.innerText = dateBuilder(now);
}
function dateBuilder(d) {
let months = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
let date = d.getDate();
let month = months[d.getMonth()];
let year = d.getFullYear();
return `${date}.${month}.${year}`;
}
.weather__wrapper {
height: 186px;
width: 355px;
border-radius: 5px;
background-color: #e4e8ef;
padding: 24px 24px 24px 24px;
margin-left: 30px; /* убрать */
}
.weather__icon {
float: left;
margin-top: 26px;
}
.weather__icon i {
color: #fab165;
font-size: 5.938em;
}
.weather__text {
float: right;
}
.weather__city { /* Локация, на видел input */
font-weight: 400;
font-size: 1.500em;
margin-bottom: 0!important;
}
.weather__temperature {
font-weight: 800;
font-size: 1.500em;
margin-bottom: 0!important;
}
.weather__date {
font-size: 1.250em;
font-weight: 200;
margin-bottom: 0!important;
}
.slide-weather__items {
display: flex;
outline: none;
}
.slide-weather {
margin-bottom: 100px;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="slide-weather">
Hello
<div class="slide-weather__items">
<div class="weather__wrapper">
<!-- weather on video -->
<div class="weather__icon"><i class="fas fa-sun"></i></div>
<div class="weather__text">
<p class="weather__city sochi">Sochi</p>
<div class="weather__current-temp">
<p class="weather__temperature">+23<sup>o</sup>C - air</p>
</div>
<div class="weather__water">
<p class="weather__temperature">+23<sup>o</sup>C - water</p>
</div>
<p class="weather__date">29.05.2020</p>
</div>
</div>
<div class="weather__wrapper">
<!-- weather on video -->
<div class="weather__icon"><i class="fas fa-sun"></i></div>
<div class="weather__text">
<p class="weather__city">Novorossiysk</p>
<div class="weather__current-temp">
<p class="weather__temperature">+23<sup>o</sup>C - air</p>
</div>
<div class="weather__water">
<p class="weather__temperature">+23<sup>o</sup>C - water</p>
</div>
<p class="weather__date">29.05.2020</p>
</div>
</div>
<div class="weather__wrapper">
<!-- weather on video -->
<div class="weather__icon"><i class="fas fa-sun"></i></div>
<div class="weather__text">
<p class="weather__city">Gelendzhik</p>
<div class="weather__current-temp">
<p class="weather__temperature">+23<sup>o</sup>C - air</p>
</div>
<div class="weather__water">
<p class="weather__temperature">+23<sup>o</sup>C - water</p>
</div>
<p class="weather__date">29.05.2020</p>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/weather.js"></script>
</body>
</html>
发生这种情况是因为您将整个标签作为城市名称而不是 innerHTML 传递:
getResults(city.innerHTML);
您收到 weather.sys 错误,因为天气变量不包含任何数据。所以你应该在 displayResults 函数中或调用它之前添加一些错误处理。
编辑:添加温度更新:
var parent = document.querySelector('.' + weather.name.toLowerCase()).parentNode
parent.querySelector('.weather__current-temp .weather__temperature').innerHTML = Math.round(weather.main.temp) + '<sup>o</sup>C - air';
这段代码很丑陋,但这只是它应该如何工作的一个例子。您应该将 temperature html 建筑物和父搜索移到一个单独的函数中。如果所有 weather__city 元素都具有城市 类,这将起作用。
如果您不想添加城市 类 并且想通过 innerText 搜索父级,请查看此答案:How to get element by innerText
它是这样工作的:
const api = {
key: "11c85ec89d2ab590110511a07349dd25",
baseurl: "https://api.openweathermap.org/data/2.5/"
}
const weather__wrapper = document.addEventListener('DOMContentLoaded', setQuery);
var check = document.querySelector('.weather__city').textContent;
function setQuery(evt) {
const wrappers = document.querySelectorAll('.weather__wrapper');
wrappers.forEach( w => {
var city = w.querySelector('.weather__city');
getResults(city.innerHTML);
});
}
function getResults (query) {
fetch(`${api.baseurl}weather?q=${query}&units=metric&APPID=${api.key}`)
.then(weather=> {
return weather.json();
}).then(displayResults);
}
function displayResults(weather) {
let city = document.querySelectorAll('.weather__text .weather__city');
city.innerText = `${weather.name}, ${weather.sys.country}`;
let now = new Date();
let date = document.querySelector('.weather__text .weather__date');
date.innerText = dateBuilder(now);
document.querySelector('.' + weather.name.toLowerCase()).parentNode.querySelector('.weather__current-temp .weather__temperature').innerHTML = Math.round(weather.main.temp) + '<sup>o</sup>C - air';
}
function dateBuilder(d) {
let months = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
let date = d.getDate();
let month = months[d.getMonth()];
let year = d.getFullYear();
return `${date}.${month}.${year}`;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="slide-weather">
Hello
<div class="slide-weather__items">
<div class="weather__wrapper">
<!-- weather on video -->
<div class="weather__icon"><i class="fas fa-sun"></i></div>
<div class="weather__text">
<p class="weather__city sochi">Sochi</p>
<div class="weather__current-temp">
<p class="weather__temperature">+23<sup>o</sup>C - air</p>
</div>
<div class="weather__water">
<p class="weather__temperature">+23<sup>o</sup>C - water</p>
</div>
<p class="weather__date">29.05.2020</p>
</div>
</div>
<div class="weather__wrapper">
<!-- weather on video -->
<div class="weather__icon"><i class="fas fa-sun"></i></div>
<div class="weather__text">
<p class="weather__city novorossiysk">Novorossiysk</p>
<div class="weather__current-temp">
<p class="weather__temperature">+23<sup>o</sup>C - air</p>
</div>
<div class="weather__water">
<p class="weather__temperature">+23<sup>o</sup>C - water</p>
</div>
<p class="weather__date">29.05.2020</p>
</div>
</div>
<div class="weather__wrapper">
<!-- weather on video -->
<div class="weather__icon"><i class="fas fa-sun"></i></div>
<div class="weather__text">
<p class="weather__city gelendzhik">Gelendzhik</p>
<div class="weather__current-temp">
<p class="weather__temperature">+23<sup>o</sup>C - air</p>
</div>
<div class="weather__water">
<p class="weather__temperature">+23<sup>o</sup>C - water</p>
</div>
<p class="weather__date">29.05.2020</p>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/weather.js"></script>
</body>
</html>