如何实现具有自动更新功能的天气预报？

问题描述 投票：0回答：1

[请帮忙，此刻我有一个错误，`TypeError：weather.sys未定义。我使用开放天气地图。我希望每个街区根据城市自动更新日期，水和气温。我必须马上说，地理位置将集中在俄罗斯我很高兴为您解答。

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>
javascript html openweathermap
1个回答
0
投票

这是因为您将整个标签作为城市名称而不是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';

此代码非常丑陋，但仅是其工作方式的一个示例。您应该将温度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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.