javascript — ввод неверного города не приводит к тому, что в пользовательском интерфейсе ничего не происходит, и в консоли возникает ошибка

Ввод неправильного города приводит к тому, что в пользовательском интерфейсе ничего не происходит, а в консоли возникает ошибка

Я вижу ошибку, записываемую в нижнюю строку.

  //update the ui with new city updateCity(city) .then(data ={amp}gt; updateUI(data)) .catch(err ={amp}gt; console.log(err)); 

Это будет зарегистрировано как Информация в консоли браузера. Если вы хотите в качестве журнала ошибок, попробуйте вместо этого console.error(err) .

Попробуйте фрагмент кода, чтобы увидеть, как печатается ваш оператор консоли. Просто изменил console.log(err) на console.log(err.message) как консоль фрагмента SO, похоже, плохо работает с объектами ошибок.

 const key = 'TxdgOemczF6OGu7F7mMVFtHkGDcKF8W3 '; //get weather info const getWeather = async (id) ={amp}gt; { const base = 'https://dataservice.accuweather.com/currentconditions/v1/'; const query = `${id}?apikey=${key}`; const response = await fetch(base   query); const data = await response.json(); return data[0]; }; //get city info const getCity = async (city) ={amp}gt; { const base = 'https://dataservice.accuweather.com/locations/v1/cities/search'; const query = `?apikey=${key}{amp}amp;q=${city}`; const response = await fetch(base   query); const data = await response.json(); return data[0]; }; const cityForm = document.querySelector('form'); const card = document.querySelector('.card'); const details = document.querySelector('.details'); const time = document.querySelector('img.time'); const icon = document.querySelector('.icon img'); const updateErrorUI = () ={amp}gt; { details.innerHTML = `No data found`; if(card.classList.contains('d-none')){ card.classList.remove('d-none'); } } const updateUI =(data) ={amp}gt; { console.log(data); const cityDets = data.cityDets; const weather = data.weather; //update details template details.innerHTML =` {amp}lt;h5 class="my-3"{amp}gt;${cityDets.EnglishName}{amp}lt;/h5{amp}gt; {amp}lt;div class="my-3"{amp}gt;${weather.WeatherText}{amp}lt;/div{amp}gt; {amp}lt;div class="display-4 my-4"{amp}gt; {amp}lt;span{amp}gt;${weather.Temperature.Metric.Value}{amp}lt;/span{amp}gt; {amp}lt;span{amp}gt;{amp}amp;deg;C{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; `; //update the night/day {amp}amp; icon imgs const iconSrc = `scripts/icons/${weather.WeatherIcon}.svg`; icon.setAttribute('src', iconSrc); let timesrc = null; if(weather.IsDayTime){ timeSrc = 'scripts/day.svg'; } else { timeSrc = "scripts/night.svg"; } time.setAttribute('src', timeSrc); //remove d-none class if present if(card.classList.contains('d-none')){ card.classList.remove('d-none'); } }; const updateCity = async (city) ={amp}gt; { const cityDets = await getCity(city); const weather = await getWeather(cityDets.Key); return { cityDets: cityDets, weather: weather }; }; cityForm.addEventListener('submit', e ={amp}gt; { // prevent default action e.preventDefault(); //get city value const city = cityForm.city.value.trim(); cityForm.reset(); //update the ui with new city updateCity(city) .then(data ={amp}gt; updateUI(data)) .catch(err ={amp}gt; { console.log(err.message); updateErrorUI(); } ); }); 
 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html lang="en"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="UTF-8" /{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /{amp}gt; {amp}lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /{amp}gt; {amp}lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /{amp}gt; {amp}lt;link href="https://fonts.googleapis.com/css?family=Mansalva{amp}amp;display=swap" rel="stylesheet" /{amp}gt; {amp}lt;link rel="stylesheet" href="style.css" /{amp}gt; {amp}lt;title{amp}gt;Weather Ninja{amp}lt;/title{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div class="container my-5 mx-auto"{amp}gt; {amp}lt;h1 class="text-muted text-center my-4"{amp}gt;Weather Ninja{amp}lt;/h1{amp}gt; {amp}lt;form class="change-location my-4 text-center text-muted"{amp}gt; {amp}lt;label for="city"{amp}gt;Enter a location for weather information{amp}lt;/label{amp}gt; {amp}lt;input type="text" name="city" class="form-control p-4" /{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;div class="card shadow-lg rounded d-none "{amp}gt; {amp}lt;img src="https://via.placeholder.com/400x300" class="time card-img-top" alt="place-holder" /{amp}gt; {amp}lt;div class="icon bg-light mx-auto text-center"{amp}gt; {amp}lt;img src="" alt="results" /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="text-muted text-uppercase text-center details"{amp}gt; {amp}lt;h5 class="my-3"{amp}gt;City name{amp}lt;/h5{amp}gt; {amp}lt;div class="my-3"{amp}gt;Weather condition{amp}lt;/div{amp}gt; {amp}lt;div class="display-4 my-4"{amp}gt; {amp}lt;span{amp}gt;temp{amp}lt;/span{amp}gt; {amp}lt;span{amp}gt;{amp}amp;deg;C{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector