JSON API搜索栏开发求助：onkeyup失效及DOM空值错误

问题描述 #

我是编程新手，正在开发基于JSON API（通过API链接和密钥关联）的搜索栏，目前遇到两个问题：

• 异步函数søk()无法配合onkeyup事件正常工作，不确定是否因异步特性导致；
• 执行x.innerHTML = ""时出现“Cannot set properties of 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();
});

问题修复 #

1. 异步函数与onkeyup事件不触发的问题 #

• 原因：søk()函数定义在DOMContentLoaded回调内部，属于局部函数，全局作用域找不到它，所以内联的onkeyup="søk()"无法调用。另外每次按键都重新请求API，不仅慢还浪费资源。
• 修复：
  1. 页面加载时一次性获取API数据并缓存，搜索时只做本地过滤；
  2. 移除内联事件，用JS直接给输入框绑定keyup事件，避免全局作用域污染。

2. Cannot set properties of null错误 #

• 原因：document.querySelector("listHolder")写法错误，ID选择器需要加#前缀，正确写法是document.querySelector("#listHolder")，或者用document.getElementById("listHolder")更直接高效。

其他隐藏问题修复 #

• NewsAPI返回的数据里，新闻列表在articles字段里，直接遍历data.length会报错，要改成data.articles；
• 模板字符串要用反引号`包裹，单引号不会解析${}变量；
• author变量未定义，应该用obj.author，还要处理作者为空的情况避免报错。

修复后的完整代码 #

HTML

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

JavaScript

window.addEventListener("DOMContentLoaded", async () => {
  // 页面加载时先获取API密钥和新闻数据并缓存
  const apiKeyRes = await fetch("nyheter.json");
  const apiKeyData = await apiKeyRes.json();
  const apiKey = apiKeyData[0].apikey;

  const newsRes = await fetch(`https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=${apiKey}`);
  const newsData = await newsRes.json();
  const articles = newsData.articles; // 缓存新闻列表

  const søkefelt = document.getElementById("søkefelt");
  const listHolder = document.getElementById("listHolder");

  // 搜索函数
  function søk() {
    const input = søkefelt.value.toLowerCase();
    listHolder.innerHTML = ""; // 清空列表

    articles.forEach(obj => {
      if (obj.title.toLowerCase().includes(input)) {
        const elem = document.createElement("li");
        elem.innerHTML = `${obj.title} - ${obj.author || "匿名作者"}`; // 处理作者为空的情况
        listHolder.appendChild(elem);
      }
    });
  }

  // 绑定键盘事件
  søkefelt.addEventListener("keyup", søk);
  // 页面加载时执行一次搜索（显示全部内容）
  søk();
});

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