HTML/JavaScript天气数据展示问题（displayWeather函数报错）

问题概述 #

开发基于HTML和JavaScript的天气应用，通过OpenWeatherMap API获取天气数据并展示，但displayWeather函数报错“weather.description的数据为'0'”，错误出现在JavaScript文件第15行。

错误分析与修复点 #

1. 变量名不匹配 #

代码中定义天气描述变量为desc，但后续打印和DOM更新时误用了未定义的description，导致报错：

// 错误写法
const desc = data.weather[0].description;
console.log(name, icon, description, temp, speed, humidity);
document.querySelector.innerText = description;

// 修正后
const description = data.weather[0].description; // 统一变量名
console.log(name, icon, description, temp, speed, humidity);
document.querySelector(".description").innerText = description;

2. 城市名称获取错误 #

原代码将整个API返回对象赋值给name，导致页面显示Weather in [object Object]，需改为获取data.name：

// 错误写法
const name = data;

// 修正后
const name = data.name;

3. DOM选择器缺失 #

更新描述时未指定目标元素，需补充.description类选择器：

// 错误写法
document.querySelector.innerText = description;

// 修正后
document.querySelector(".description").innerText = description;

4. API参数拼写错误 #

请求API时units=metrics拼写错误，正确应为units=metric，否则无法正确获取摄氏度温度：

// 错误写法
fetch("https://api.openweathermap.org/data/2.5/weather?q=" +
    city +
    "&units=metrics&appid=" +
    this.apiKey
  )

// 修正后
fetch("https://api.openweathermap.org/data/2.5/weather?q=" +
    city +
    "&units=metric&appid=" +
    this.apiKey
  )

5. 缺失错误处理逻辑 #

当API返回错误（如城市不存在）时，data.weather会不存在，导致代码崩溃，需添加判断：

displayWeather: function(data) {
  // 先判断API是否返回有效数据
  if (!data.weather || data.weather.length === 0) {
    alert("无法获取该城市天气数据");
    return;
  }
  // 后续赋值逻辑...
}

修正后的完整JavaScript代码 #

let weather = {
  apiKey: "a5fd20552e868ea7597dd68dec1dd543",
  fetchWeather: function(city) {
    fetch("https://api.openweathermap.org/data/2.5/weather?q=" +
        city +
        "&units=metric&appid=" +
        this.apiKey
      )
      .then((response) => {
        if (!response.ok) {
          throw new Error("城市未找到");
        }
        return response.json();
      })
      .then(data => this.displayWeather(data))
      .catch(err => alert(err.message));
  },
  displayWeather: function(data) {
    const name = data.name;
    const description = data.weather[0].description;
    const icon = data.weather[0].icon;
    const temp = data.main.temp;
    const speed = data.wind.speed;
    const humidity = data.main.humidity;
    
    console.log(name, icon, description, temp, speed, humidity);
    
    document.querySelector(".city").innerHTML = "Weather in " + name;
    document.querySelector(".icon").src = "https://openweathermap.org/img/wn/" + icon + ".png";
    document.querySelector(".description").innerText = description;
    document.querySelector(".temp").innerText = Math.round(temp) + "° C";
    document.querySelector(".humidity").innerText = "Humidity: " + humidity + "%";
    document.querySelector(".wind").innerText = "Wind speed: " + speed + " km/h";
  },
}

// 补充搜索按钮和输入框事件监听
document.querySelector(".search button").addEventListener("click", function() {
  const city = document.querySelector(".search-bar").value;
  weather.fetchWeather(city);
});

document.querySelector(".search-bar").addEventListener("keyup", function(event) {
  if (event.key === "Enter") {
    const city = document.querySelector(".search-bar").value;
    weather.fetchWeather(city);
  }
});

额外优化点 #

• 补充了搜索按钮和回车键的事件监听，实现搜索功能
• 对温度进行取整处理，显示更友好
• 添加了API响应错误处理，避免崩溃

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