英文:
What am I doing wrong with my weather app?
问题
我正尝试创建一个天气应用程序，以学习编程。我自己设计了这个应用程序，并按照JavaScript教程进行了操作，但在使用OpenWeather API时遇到了400错误。以下是我的代码：
const searchbar = document.querySelector('#search-bar');
const temperature = document.querySelector('.temperature');
const description = document.querySelector('.description');
const imageContainer = document.querySelector('.image-container');
const API_KEY = '<MY_API_KEY>';
const apiURL = `https://api.openweathermap.org/data/2.5/weather?q=${searchbar.value}&units=metric&appid=${API_KEY}`;
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
fetch(apiURL);
});
async function getWeather() {
const response = await fetch(apiURL);
const data = await response.json();
console.log(data);
}
如何解决400错误？
英文:
I am attempting to create a weather app as a way to learn how to code. I have designed the app myself and followed a tutorial for the JavaScript, but I encountered a 400 error when using the OpenWeather API. Here is my code:
const searchbar = document.querySelector('#search-bar');
const temperature = document.querySelector('.temperature');
const description = document.querySelector('.description');
const imageContainer = document.querySelector('.image-container');
const API_KEY = '<MY_API_KEY>';
const apiURL = `https://api.openweathermap.org/data/2.5/weather?q=${searchbar.value}&units=metric&appid=${API_KEY}`;
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
fetch(apiURL);
});
async function getWeather() {
const response = await fetch(apiURl);
const data = await response.json();
console.log(data);
}
What can I do to resolve the 400 error?
答案1
得分: 1
整合评论，您应该进行以下更改：
- 每次重新评估URL
- 使用
URL.searchParams - 在提交事件监听器中调用
getWeather()
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
getWeather();
});
async function getWeather() {
const apiURL = new URL("https://api.openweathermap.org/data/2.5/weather");
apiURL.searchParams.set("q", searchbar.value);
apiURL.searchParams.set("units", "metric");
apiURL.searchParams.set("appid", API_KEY);
const response = await fetch(apiURL.toString());
const data = await response.json();
console.log(data);
}
英文:
Aggregating the comments, you should make the following changes:
- re-evaluate the url everytime
- use
URL.searchParams - call
getWeather()in submit event listener
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
getWeather();
});
async function getWeather() {
const apiURL = new URL("https://api.openweathermap.org/data/2.5/weather");
apiURL.searchParams.set("q",searchbar.value);
apiURL.searchParams.set("units","metric");
apiURL.searchParams.set("appid",API_KEY);
const response = await fetch(apiURL.toString());
const data = await response.json();
console.log(data);
}
答案2
得分: 0
-
apiURL变量被移到事件监听器内部，因此在表单提交时，它获取#search-bar输入的当前值。 -
在表单提交时调用
getWeather函数。 -
使用 try-catch 处理在获取操作期间可能出现的任何错误。
英文:
-
The
apiURLvariable is moved inside the event listener, so it takes the current value of the#search-barinput when the form is submitted. -
Call
getWeatherfunction when the form is submitted. -
Use try-catch to handle any potential errors during the fetch operation.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const searchbar = document.querySelector('#search-bar');
const API_KEY = '<MY_API_KEY>';
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
const apiURL = `https://api.openweathermap.org/data/2.5/weather?q=${searchbar.value}&units=metric&appid=${API_KEY}`;
getWeather(apiURL);
});
async function getWeather(apiURL) {
try {
const response = await fetch(apiURL);
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error fetching weather data:', error);
}
}
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论