JSON (API) 的搜索欄，需要幫助:)

Question

我目前正在嘗試為 JSON fil（通過 API 鏈接和密鑰鏈接）編寫搜索欄代碼。 我對編碼很陌生，尤其是這個領域。

我目前無法讓我的 function 與 onkeyup() 一起工作可能是因為它是一個異步 function？ 正如我所說，我對此很陌生，所以 idk，並且我的“x.innerHTML =”“”出現錯誤，說“無法設置 null 的屬性”，現在我在這里看起來像個白痴並且遺漏了一些明顯的東西，但我會非常感謝所有答案:)

謝謝你的時間！

HTML：

 <div id="søk"><input id="søkefelt" onkeyup="søk()" type="text" placeholder="Search..">
        <ul id="listHolder"></ul>
        </div>

javascript：

window.addEventListener("DOMContentLoaded", (Event) => {
async function søk() {
    const apiKey = await fetch ("nyheter.json")
    .then ((response) => response.json());

    var data = await fetch ("https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=" + apiKey[0].apikey)
    .then((response) => response.json());

    let input = document.getElementById("søkefelt").value
    input = input.toLowerCase();
    let x = document.querySelector("listHolder");
    x.innerHTML = ""
    for (let i = 0; i < data.length; i++) {
        const obj = data[i];

        if (obj.title.toLowerCase().includes(input)) {
            const elem = document.createElement("li")
            elem.innerHTML = '${obj.title} - ${author}'
            x.appendChild(elem)
        }
        
    };

        }
søk();

});

Answer 1

querySelector需要#在 id 之前

querySelector("#listHolder")