OpenWeatherMap API天气动态图标无法显示问题求助

1. 未引入Weather Icons字体样式库 #

你代码中使用的wi类（如wi-thunderstorm、wi-day-sunny）属于Weather Icons字体图标库，必须先引入该库的CSS文件才能让图标正常显示。当前代码中没有包含这个关键依赖，所以即使生成了<i>标签，浏览器也无法渲染出对应的图标。

解决方法：
下载Weather Icons库后，将其CSS文件引入到HTML头部，例如：

<link rel="stylesheet" href="weather-icons.min.css">

确保CSS文件路径与你的项目文件结构匹配。

2. 脚本执行时机过早 #

你将<script src="main.js"></script>放在了HTML头部，此时页面DOM还未完全加载，getWeather()执行时，document.getElementById('weather-icon')会返回null，无法替换默认文本。

解决方法：

• 方法一：将脚本标签移到</body>标签之前，确保DOM渲染完成后再执行脚本：

<body>
  <!-- 页面其他内容 -->
  <div class="weatherIcon"> 
      <h2><span id="weather-icon">weather icon...</span></h2> 
  </div>
  <script src="main.js"></script>
</body>

• 方法二：在main.js中监听DOM加载完成事件后再调用getWeather()：

// 替换原来的getWeather()调用
document.addEventListener('DOMContentLoaded', getWeather);

3. 验证控制台错误 #

打开浏览器开发者工具（F12），切换到Console标签页，查看是否有JavaScript错误或网络请求异常。即使你说直接请求API能获取数据，也可以确认：

• API请求是否返回了预期的weather[0].id值
• 是否有其他语法错误导致代码中断

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