search-bar for JSON (API), need help:)

Question

i am currently stuck trying to code a search-bar for an JSON fil (linked via an API link and key). I am fairly new to coding and especially new to this field.

i currently cant get my function to work with onkeyup() maybe because its an async function? as i said im fairly new to this so idk, and I get an error for my "x.innerHTML = "" " saying "Cannot set properties of null", now i may look like an idiot here and missing something obvious but I would very much appreciate all answers:)

thanku for your time!

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 requires # before ids

querySelector("#listHolder")