[英]Search Button in my Javascript Weather Application doesn't seem to work
我正在 JavaScript 中编写我的天气应用程序。我的搜索按钮有问题，输入城市名称并按回车按钮后，应用程序数据不会改变。 我应该在我的 API 变量 (const api) 或我的 fetch 中更改什么以使其工作？ 或者我的 api 数据有问题？ 这是我的 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 代码：
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}`;
}
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>
我更新了 baseURL 值。 您不需要在那里包含“q”和“appid”部分）同样在调用（URL 构建）中您使用了错误的参数名称。 这不是base ，而是baseURL
您需要捕获来自异步调用的错误，否则您将无法正确调试，您的 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>
Attr确实可以，但是removeAttr似乎对我的按钮不起作用
[英]Attr does work, but removeAttr doesn't seem to work on my button
使用按钮（在我的中继器中）使用 javascript 显示隐藏信息，但似乎不起作用
[英]Using a button (in my repeater) to show hidden information using javascript but doesn't seem to work
Facebook共享按钮似乎无法在使用Javascript和Ajax的Webmethod中使用
[英]Facebook share button doesn't seem to work in a Webmethod with Javascript and Ajax
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.