在本地运行OpenWeather应用程序似乎不工作

我尝试使用OpenWeatherMap.org api为我的作品集创建一个基本的天气应用程序。然而，在执行了这些步骤之后，应用程序并没有产生所需的结果。

当在使用node的终端中运行我的javascript时，我得到一个引用错误，说明文档未定义;天气应用程序也不能在浏览器中运行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Montserrat Google Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> 
    <!-- Stylesheet -->
    <link href="./WeatherApp.css" rel="stylesheet">
    <title>Local Weather App</title>
</head>
<body>
<div class="app-wrapp">
    <header>
        <form>
        <input class="search-box" type="text" placeholder="Search for a city." autocomplete="off">
        </form>
    </header>
    <main>
        <section class="location">
            <div class="city">
                Delhi, IN
            </div>
            <div class="date">
                Friday 04 November 2022
            </div>
        </section>
        <div class="current">
            <div class="temp">15<span>°C</span></div>
            <div class="weather">Sunny</div>
            <div class="hi-low">13°C / 16°C</div>
        </div>
    </main>
</div>
    <script src="./ComplicatedWeatherApp.js"></script>
</body>
</html>

const api = {
    key: "<API_KEY>",
    base: "https://api.openweathermap.org/data/2.5/"
}

const searchbox = document.querySelector(".search-box");
searchbox.addEventListener("keypress", setQuery);
function setQuery(any) {
    if(any.keyCode == 13) {
        getResults(searchbox.value);
    }
}
function getResults (query) {
    fetch(`${this.api.base}weather?q=${query}&units=metric&APPID=${this.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 = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
    let day = days[d.getDay()]
    let date = d.getDate();
    let month = months[d.getMonth()];
    let year = d.getFullYear();
    return `${day} ${date} ${month} ${year}`;
}

你的代码有三个部分需要注意。

this.api.base和this.api.key应该是api.base和api.key。

fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)

keyCode现在已弃用，您应该使用key。

您的输入在form元素中，这会导致页面在提交时重新加载，因此您需要防止这种情况发生。

// Function accepts the keyboard event
function setQuery(e) {
  // If the pressed key is "Enter"
  if (e.code === 'Enter') {
    // Prevent the form from submitting,
    // and then get the results
    e.preventDefault();
    getResults(searchbox.value);
  }
}

相关内容

最新更新

热门标签：