使用 API 创建天气应用程序，我正在尝试显示图标

Question

I have been fiddling with this code teaching myself javaScript and API. I can retrieve the icon and get it to show doing document.body.innerHTML = imgUrl , but I can't get it to show in the specific div using the variable iconPlacement. It says in the console that "Cannot set property 'innerHTML' of null". Everything else works great I just can't get the icon to show up!

window.addEventListener('load', ()=> {
    let long;
    let lat;
    let temperatureDescription = document.querySelector('.temperature-description');
    let temperatureDegree = document.querySelector('.temperature-degree');
    let locationTimeZone = document.querySelector('.location-timezone');
    let iconPlacement = document.querySelector("icon");


    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(position =>{
            long = position.coords.longitude;
            lat = position.coords.latitude;

            const api = `http://api.weatherapi.com/v1/current.json?key=#&q=${lat},${long}`;

            fetch(api)
            .then(response =>{
                return response.json();
            })
            .then(data =>{
                console.log(data)
                const {temp_f} = data.current;
                const {text} = data.current.condition;
                const {name,region} = data.location;
                const iconUrl = data.current.condition.icon;
                const imgUrl = ("<img src='https:" + iconUrl  + "'>");
                //set DOM elements from the API
                temperatureDegree.textContent = temp_f;
                temperatureDescription.textContent = text;
                locationTimeZone.textContent = name + "," + " " + region;
                iconPlacement.innerHTML = imgUrl;
                });

        
        });
    }

});

Answer 1

You didn't select the div, that's why you get the error message. Try to select it with it's class or id name:

let iconPlacement = document.querySelector(".icon");  /*(by class)*/
let iconPlacement = document.querySelector("#icon");  /*(by id)*/

also I would suggest to make the api call an async function:

const apiCall = async () => {
    const response = await fetch(/*url*/);
    const jsonRespons = await response.json();
    /*code to handle json*/
}

Answer 2

Just use a class or an id for your icon(s).

<div id="icon"></div>

Now you can do the following in jquery:

$("#icon").html(imgUrl) ;

And always try to write the code in simplest way. I would have never used query selector where I could use just $("#id)" . If you still wanna use query selector, you have to go through a for each loop.