天气应用：根据天气文本内容切换图片源失败的问题求助

嘿，我帮你排查了代码，发现几个关键问题，这就是图片一直空白的根源：

1. 事件监听写法错误，changeImg函数根本没被执行 #

你把changeImg放在了addEventListener的第三个参数位置，但这个位置是用来传事件配置选项（比如useCapture）的，不是回调函数！导致changeImg从来没被调用过，自然不会修改图片的src。

2. HTML用了错误的图片标签 #

HTML里没有<image>这个元素，正确的图片标签是<img>，浏览器没法正确解析<image>，就算src正确也显示不出来。

3. 图片切换逻辑的时机不对 #

就算调用了changeImg，也要确保在desc的文本被更新之后执行，不然拿到的是旧的（甚至空的）文本值，拼接出来的src肯定不对。

给你改好的代码参考：

修改后的JS代码：

let button = document.querySelector('.button')
let inputLocation = document.querySelector('.location')
let temp = document.querySelector('.temp');
let desc = document.querySelector('.desc');
let image = document.getElementById("image");

// 独立封装切换图片的函数
function changeImg() {
    // 用更新后的天气文本转小写拼接路径
    const weatherType = desc.textContent.toLowerCase();
    image.src = `images/${weatherType}.svg`;
    console.log('当前图片路径:', image.src);
}

button.addEventListener('click', function(){
    fetch(`https://api.openweathermap.org/data/2.5/weather?q=${inputLocation.value}&units=metric&appid=9f5cf42409938f351c3a005bbc01773f`)
        .then(response => response.json())
        .then(displayData)
        // 显示数据后再调用切换图片的函数
        .then(changeImg)
        .catch(err => alert('Not a city name.'));
})

const displayData=(weather)=>{
    temp.innerText=`${weather.main.temp.toFixed(0)}°C`
    desc.innerText=`${weather.weather[0].main}`
}

修改后的HTML图片部分：

<div class="image">
    <img id="image" alt="天气图标">
</div>

最后还要确认几个细节：

• 项目里确实存在images文件夹，且里面的文件名和天气类型转小写后完全匹配（比如clear.svg、rain.svg、clouds.svg）
• 查看浏览器控制台打印的图片路径，确认和实际文件路径一致，没有拼写错误

备注：内容来源于stack exchange，提问作者viper