天气应用JavaScript无法获取搜索位置API数据问题排查

我开发了一款天气应用，想要展示指定地区的天气及湿度、气压等详情，但JavaScript无法获取搜索框输入位置的API数据。已确认API Key和API Url无误，尝试多种方法仍未解决，相关代码如下：

HTML 文件 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>
    <script src="https://kit.fontawesome.com/96bfde6bea.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="yes.css"> 
</head>
<body>
    <div id="frame">
        <div id="location">Search for a location</div>
        <form id="form123">
            <input type="search" id="search123" placeholder="Enter a city name...">
            <button id="search_button"><i id="search_icon" class="fa-solid fa-magnifying-glass"></i></button>
        </form>
        <div id="box1">
            <div id="loc1">
                <i class="fa-solid fa-location-dot"></i></i>
                <div id="city1">Paris</div>
                <div id="country1">FR</div> 
            </div>
            <div id="full_date"></div>
            <div id="fullweather_info">
                <i id="weather_icon" class="fa-solid fa-sun"></i>
                <div id="weather_unit"></div>
                <div id="weather_disc">Sunny</div>
                <div id="weather_border"></div>   
            </div>
            <div class="details">
                <div class="left">
                    <div id="humidity_title">Humidity</div>
                    <i class="fa-solid fa-cloud-rain"></i>
                    <div id="humidity_disc">50%</div>
                </div>
                <div id="center_bar"></div>
                <div class="middle">
                    <div id="wind_title">Wind Speed</div>
                    <i class="fa-solid fa-wind"></i>
                    <div id="wind_disc">15 km/h</div>
                </div>
                <div id="center_bar"></div>
                <div class="right">
                    <div id="pressure_title">Air Pressure</div>
                    <i class="fa-solid fa-tornado"></i>
                    <div id="pressure_disc">hPa</div>
                </div>
            </div>
        </div>
    </div>
    <script src="yes.js"></script>
</body>
</html>

JavaScript 文件 #

const weekdays = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
const d = new Date();
let weekday = weekdays[d.getDay()]
const months = ["Jan","Feb","Mar","Apr","May","June","July","Aug","Sep","Oct","Nov","Dec"];
let full_date = document.getElementById("full_date")
let full_day = d.getDate();
let full_year = d.getFullYear();
let full_month = months[d.getMonth()]

full_date.innerHTML = weekday + " " + full_day + " " + full_month + " " + full_year;

const apiKey = "2e0012571930ac4b99b14046b8e90317";
const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";

const searchInput = document.querySelector("#search123");
const searchBtn = document.querySelector("#search_button");
const city = searchInput.value;


async function checkWeather(city){
    const url = `${apiUrl}${city}&appid=${apiKey}`;
    const response = await fetch(url);
    const data = await response.json();

    console.log(data);

    document.querySelector("#city1").innerHTML = data.name;
    document.querySelector("#country1").innerHTML = data.sys.country;
    document.querySelector("#weather_unit").innerHTML = Math.round(data.main.temp) + "°C";
    document.querySelector("#weather_disc").innerHTML = data.weather[0].main;
    document.querySelector("#humidity_disc").innerHTML = data.main.humidity + "%";
    document.querySelector("#wind_disc").innerHTML = data.wind.speed + " km/h";
    document.querySelector("#pressure_disc").innerHTML = data.main.pressure + " hPa";
}

searchBtn.addEventListener("click", () => {
    checkWeather(searchInput.value);
});

问题排查与修复 #

你的代码核心问题及修复方案如下：

1. 阻止表单默认提交行为
   搜索按钮在<form>标签内，点击时会触发表单默认提交，导致页面刷新中断API请求。修改点击事件监听：

searchBtn.addEventListener("click", (e) => {
    e.preventDefault(); // 阻止页面刷新
    checkWeather(searchInput.value.trim()); // 去除输入内容前后空格
});

2. 添加API请求错误处理
   当前代码未处理请求失败场景（如城市不存在、网络错误），会导致报错中断执行。修改checkWeather函数：

async function checkWeather(city){
    if(!city) return; // 空输入直接返回
    const url = `${apiUrl}${city}&appid=${apiKey}`;
    try {
        const response = await fetch(url);
        if(!response.ok) throw new Error("城市未找到或请求失败");
        const data = await response.json();

        console.log(data);

        document.querySelector("#city1").innerHTML = data.name;
        document.querySelector("#country1").innerHTML = data.sys.country;
        document.querySelector("#weather_unit").innerHTML = Math.round(data.main.temp) + "°C";
        document.querySelector("#weather_disc").innerHTML = data.weather[0].main;
        document.querySelector("#humidity_disc").innerHTML = data.main.humidity + "%";
        document.querySelector("#wind_disc").innerHTML = data.wind.speed + " km/h";
        document.querySelector("#pressure_disc").innerHTML = data.main.pressure + " hPa";
    } catch(err) {
        console.error(err.message);
        // 可在此添加用户提示，如显示"未能找到该城市"
    }
}

3. 移除无用代码与体验优化

• 删除无用变量const city = searchInput.value;，页面加载时该值为空，无实际作用。
• 添加回车触发搜索逻辑：

searchInput.addEventListener("keydown", (e) => {
    if(e.key === "Enter"){
        e.preventDefault();
        checkWeather(searchInput.value.trim());
    }
});

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