Как вывести температуру в браузер из введённого в инпут города?

Question

[Romchikyoyo]

Ребят, нужна помощь. Нужно по сабмиту формы выводить температуру в том городе, который указан в инпуте. Если такого города нет или ввёден неправильно выводить надпись — «такого города нет». Данные получаю от openweather. Что нужно исправить в коде, чтобы можно было вводить любой город, а не только который указан в переменной city?↓

Форма

<form>
    <input class="inp" type="text" placeholder="Введите город" value="">
    <button class="btn">Узнать температуру</button>
</form>

<div class="result">
    <h2>Результат: <span class="total"></span></h2>
</div>

Cкрипт

const form = document.forms[0];
const insert = document.querySelector('.total');

let btn = document.querySelector('.btn');
let cityName = document.querySelector('.inp');

form.onsubmit = function(e) {
    e.preventDefault();
    let DATA = JSON.parse(xhr.responseText);

    if(cityName.value == city) {
        insert.innerHTML = DATA.main.temp - 273;
    } else {
        insert.innerHTML = 'такого города нет';
    }
}



const APIKey = '**********************';
let city = 'Moscow';
const url = 'http://api.openweathermap.org/data/2.5/weather?q='+ city 
+'&appid='+APIKey;

let xhr = new XMLHttpRequest();

xhr.open('GET', url, false);

xhr.send();

Answer 1

[Somewhere Intech]

Вы сами присвоили let city = 'Moscow';А тут

if(cityName.value == city) {
        insert.innerHTML = DATA.main.temp - 273;
    } else {
        insert.innerHTML = 'такого города нет';
    }

Вы удивляетесь почему Барнаул не Москва.
Вообще, посмотрите ошибку от апи на запрос с несуществующим городом и проверяйте на эту ошибку, а не city (точнее сказать не могу - нет apiKey)
Но и после этого он у вас не будет работать - вы выстроили не правильную логику запроса.

Как вариант, можно так:

const form = document.forms[0];
const insert = document.querySelector('.total');

let btn = document.querySelector('.btn');
let cityName = document.querySelector('.inp');

form.onsubmit = function(e) {
    e.preventDefault();
    const url = 'http://api.openweathermap.org/data/2.5/weather?q='+ cityName.value+'&appid='+APIKey;
    fetch(url).then(response=>{
	    let DATA = response.json();
	    if('main' in DATA && 'temp' in DATA.main){
	        insert.innerHTML = DATA.main.temp - 273;
	    } else {
	        insert.innerHTML = 'такого города нет';
	    }
	}
}
const APIKey = '**********************';

Comments

[Romchikyoyo]

Что неправильно в логике?

[Somewhere Intech]

Romchikyoyo, Вы повесили хэндлер на событие подтверждения формы, но запрос к апи сделали сразу же после этого (форму ещё не подтверждали) и с city = 'Moscow'. Чтобы вы не ввели и сколько бы раз куда не нажали - данные у Вас будут одни и те же.