我的 Javascript 天气应用程序中的搜索按钮似乎不起作用

Question

I'm writing my weather app in JavaScript. I have issues with search button, data of application don't change after you put a name of city and press enter button.我正在 JavaScript 中编写我的天气应用程序。我的搜索按钮有问题，输入城市名称并按回车按钮后，应用程序数据不会改变。 What should I change in my API variable (const api) or in my fetch to make it work?我应该在我的 API 变量 (const api) 或我的 fetch 中更改什么以使其工作？ Or maybe I have problems with my api data?或者我的 api 数据有问题？ Here's my HTML code:这是我的 HTML 代码：

<html> 
  <head>
    <meta charset="UTF-8">
    <mate name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content= "ie=edge">
    <title> Weather App</title>
  </head>
  <body>
    <div class ="app-wrap" >
      <header>
        <input type= "text" autocomplete="off" class="search-box" placeholder="search for a city">
      </header>
      <main>
        <section class="location"> 
          <div class="city"> Istra, Ru </div>
          <div class="date">Friday, 24 April 2022</div>
        </section>
        <div class="current">
          <div class="temp">+14<span>°c</span></div>
          <div class="weather"> Cloudy</div>
          <div class="hi-low">+12°c/+15°c</div>
        </div>
      </main>
    </div>
  </body>
</html>

Javascript code: Javascript 代码：

const api= {
  key: "6aa96f9b0d0d34ee6efd29438b57baae",
  baseURL: "api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=6aa96f9b0d0d34ee6efd29438b57baae"
}

const searchbox= document.querySelector(".search-box");
searchbox.addEventListener("keypress", setQuery);

function setQuery(event) {
  if(event.keyCode === 13) {
    getResults(searchbox.value);
    console.log(getResults);
  }
}

function getResults(query) {
  fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`).then(weather => {
    return weather.json();
  }).then(displayResults);
}

function displayResults(weather) {
  let city= document.querySelector(".location .city");
  city.innerText= `${weather.name}, ${weather.sys.country}`;
  
  let now= new Date();
  let date= document.querySelector(".location .date");
  date.innerText= dateBuilder(now);
  
  let temp= document.querySelector(".current .temp");
  temp.innerHTML= `${Math.round(weather.main.temp)}<span>°c</span>`;
  
  let weather_el= document.querySelector(".current .weather");
  weather_el.innerText= weather.weather[0].main;
  
  let hilow= document.querySelector(".hi-low");
  hilow.innerText= `${Math.round(weather.main.temp_min)}°c / ${Math.round(weather.main.temp_max)}°c`; 
}

function dateBuilder (d) {
  let months= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  let days= ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  
  let day= days[d.getDay()];
  let date= d.getDate();
  let month= months[d.getMonth()];
  let year= d.getFullYear();
  
  return `${day} ${date} ${month} ${year}`;
}

Answer 1

 const api= { key: "6aa96f9b0d0d34ee6efd29438b57baae", baseURL: "http://api.openweathermap.org/data/2.5/" } const searchbox= document.querySelector(".search-box"); searchbox.addEventListener("keypress", setQuery); function setQuery(event) { if(event.keyCode === 13) { getResults(searchbox.value); } } function getResults(query) { const url = `${api.baseURL}weather?q=${query}&units=metric&appid=${api.key}`; fetch(url).then(weather => { return weather.json(); }).then(displayResults); } function displayResults(weather) { let city= document.querySelector(".location.city"); city.innerText= `${weather.name}, ${weather.sys.country}`; let now= new Date(); let date= document.querySelector(".location.date"); date.innerText= dateBuilder(now); let temp= document.querySelector(".current.temp"); temp.innerHTML= `${Math.round(weather.main.temp)}<span>°c</span>`; let weather_el= document.querySelector(".current.weather"); weather_el.innerText= weather.weather[0].main; let hilow= document.querySelector(".hi-low"); hilow.innerText= `${Math.round(weather.main.temp_min)}°c / ${Math.round(weather.main.temp_max)}°c`; } function dateBuilder (d) { let months= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; let days= ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; let day= days[d.getDay()]; let date= d.getDate(); let month= months[d.getMonth()]; let year= d.getFullYear(); return `${day} ${date} ${month} ${year}`; }

 <html> <head> <meta charset="UTF-8"> <mate name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content= "ie=edge"> <title> Weather App</title> </head> <body> <div class ="app-wrap" > <header> <input type= "text" autocomplete="off" class="search-box" placeholder="search for a city"> </header> <main> <section class="location"> <div class="city"> Istra, Ru </div> <div class="date">Friday, 24 April 2022</div> </section> <div class="current"> <div class="temp">+14<span>°c</span></div> <div class="weather"> Cloudy</div> <div class="hi-low">+12°c/+15°c</div> </div> </main> </div> </body> </html>

I updated the baseURL value.我更新了 baseURL 值。 You don't need to include "q" and "appid" parts there) Also in the call (URL build) you used wrong parameter name.您不需要在那里包含“q”和“appid”部分）同样在调用（URL 构建）中您使用了错误的参数名称。 It's not base , but baseURL这不是base ，而是baseURL

Answer 2

You need to catch errors coming from async calls ot you won't be able to properly debug, your API call is returning a 404 status error since you are using a wrong URL for fetch:您需要捕获来自异步调用的错误，否则您将无法正确调试，您的 API 调用返回 404 状态错误，因为您使用错误的 URL 进行获取：

 const api = { base: 'https://api.openweathermap.org/data/2.5/', key: '6aa96f9b0d0d34ee6efd29438b57baae', }; const searchbox = document.querySelector('.search-box'); searchbox.addEventListener('keyup', setQuery); function setQuery(event) { console.log('event.keyCode', event.keyCode); if (event.keyCode === 13) { getResults(searchbox.value); console.log(getResults); } } function getResults(query) { fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`).then((weather) => { console.log(weather); return weather.json(); }).then(displayResults).catch((e) => console.log(e.toString())); } function displayResults(weather) { let city = document.querySelector('.location.city'); city.innerText = `${weather.name}, ${weather.sys.country}`; let now = new Date(); let date = document.querySelector('.location.date'); date.innerText = dateBuilder(now); let temp = document.querySelector('.current.temp'); temp.innerHTML = `${Math.round(weather.main.temp)}<span>°c</span>`; let weather_el = document.querySelector('.current.weather'); weather_el.innerText = weather.weather[0].main; let hilow = document.querySelector('.hi-low'); hilow.innerText = `${Math.round(weather.main.temp_min)}°c / ${Math.round( weather.main.temp_max )}°c`; } function dateBuilder(d) { let months = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', ]; let days = [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', ]; let day = days[d.getDay()]; let date = d.getDate(); let month = months[d.getMonth()]; let year = d.getFullYear(); return `${day} ${date} ${month} ${year}`; }

 <div class="app-wrap"> <header> <input type="text" autocomplete="off" class="search-box" placeholder="search for a city" /> </header> <main> <section class="location"> <div class="city">Istra, Ru</div> <div class="date">Friday, 24 April 2022</div> </section> <div class="current"> <div class="temp">+14<span>°c</span></div> <div class="weather">Cloudy</div> <div class="hi-low">+12°c/+15°c</div> </div> </main> </div>

我的 Javascript 天气应用程序中的搜索按钮似乎不起作用

问题描述

2 个解决方案

解决方案1
1 2022-04-23 17:14:41

解决方案2
0 已采纳 2022-04-23 17:20:30

我的 Javascript 天气应用程序中的搜索按钮似乎不起作用

问题描述

2 个解决方案

解决方案1 1 2022-04-23 17:14:41

解决方案2 0 已采纳 2022-04-23 17:20:30

解决方案1
1 2022-04-23 17:14:41

解决方案2
0 已采纳 2022-04-23 17:20:30