输入新城市时如何自动清空原有天气数据

作者：袖梨 2026-06-02

开发天气应用时，如何通过openweather api实现界面无痕更新？关键在于利用JavaScript在请求前清除旧数据，避免信息堆叠。

当前代码中，displayWeather()和displayForecast()函数会不断向DOM追加内容，导致切换城市时页面出现多组天气数据重叠。解决问题的核心在于：发起新请求前主动清空容器节点。

✅ 正确做法：添加 resetUI() 清理函数

在执行fetchWeather(city)和fetchForecast(city)之前，需要先调用清理函数：

function resetUI() {
  // 清空主天气显示区域
  header.innerHTML = '';
  row.innerHTML = '';
  info.innerHTML = '';
  // 清空预报区域（注意：middle 是 forecast 的容器）
  middle.innerHTML = '';
}

接着修改handleClick函数，确保每次查询前重置界面：

function handleClick(event) {
  event.preventDefault();
  const cityInput = document.getElementById("cityInput").value.trim();
  if (!cityInput) return; // 防止空输入触发请求
  resetUI(); // ? 关键：先清空旧内容
  fetchWeather(cityInput);
  fetchForecast(cityInput);
}

⚠️ 注意事项与优化建议

不要仅清空input值：单独清除cityInput.value无法解决DOM数据累积问题；
避免重复创建节点：displayWeatherIcon()中的row.prepend(icon)会持续前置插入，建议改为row.innerHTML = ''后重新插入，或使用row.replaceChildren(icon)；
增强健壮性：确保header、row、info、middle等DOM元素具有唯一标识，防止误删其他内容；
添加加载提示：在resetUI()中设置loading状态提升体验：
```
function resetUI() {
  header.innerHTML = '';
  row.innerHTML = '
```
Loading...
'; info.innerHTML = ''; middle.innerHTML = ''; }