本地运行OpenWeatherMap天气应用失败，请求故障排查

我为个人作品集开发了一款基于OpenWeatherMap API的基础天气应用，但完成后无法得到预期结果：

• 用Node在终端运行JavaScript代码时，出现「document is not defined」的引用错误
• 应用在浏览器中也无法正常工作

相关代码 #

HTML文件

<!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>

JavaScript文件

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}`;
}

问题分析与修复方案 #

1. Node终端报错原因
   document是浏览器环境提供的DOM对象，Node.js没有这个内置对象。你的代码是前端浏览器代码，不能直接用Node运行，必须通过浏览器打开HTML文件启动应用。

2. 浏览器运行异常修复

   • 移除错误的this引用：getResults函数里的this.api指向错误，直接使用全局的api对象即可
   • 替换API密钥：将<API_KEY>替换为你在OpenWeatherMap官网获取的真实密钥
   • 添加错误处理：捕获请求异常，方便排查网络或API问题

修复后的JavaScript代码：

const api = {
    key: "你的真实API密钥", // 替换为OpenWeatherMap API密钥
    base: "https://api.openweathermap.org/data/2.5/"
}

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

function setQuery(e) {
    if(e.keyCode === 13) {
        getResults(searchbox.value);
    }
}

function getResults(query) {
    fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
    .then(weather => {
        return weather.json();
    }).then(displayResults)
    .catch(err => {
        console.error("请求失败:", err);
        alert("无法获取天气数据，请检查城市名称或API密钥");
    });
}

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}`;
}

内容的提问来源于stack exchange，提问作者JakeAtkinson