使用NewsAPI开发的新闻App输入框搜索功能无法生效如何解决

修复后代码 #

HTML部分 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>新闻应用</title>
</head>
<body>
<header>
    <h1 class="heading">新闻</h1>
    <form class="searchform" autocomplete="off">
        <input class="searchBox" name="search" type="text" required placeholder="输入搜索内容">
        <button type="submit">搜索</button>
    </form>
    <!-- 修正列表容器结构，将单li改为ul作为列表根容器 -->
    <ul class="newsList"></ul>
    <script src="js/main.js"></script>
</header>
</body>
</html>

JavaScript部分 #

const newsList = document.querySelector(".newsList")
// 修正表单选择器，匹配HTML中的searchform类名
const form = document.querySelector("form.searchform")

// 封装新闻请求逻辑，接收搜索关键词作为参数
function fetchNews(searchKey) {
    // 清空历史搜索结果
    newsList.innerHTML = ''
    // 自动生成30天内的日期，适配NewsAPI免费版的日期限制
    const dateBefore30Days = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
    // 修正模板字符串语法，用反引号包裹才能解析${}变量
    // 对关键词做URI编码，避免特殊字符导致请求异常
    const url = `https://newsapi.org/v2/everything?` +
              `q=${encodeURIComponent(searchKey)}&` +
              `from=${dateBefore30Days}&` +
              `sortBy=popularity&` +
              `apiKey=替换为你自己的NewsAPI密钥`;

    fetch(url)
    .then(function(response) {
        if(!response.ok) throw new Error('网络请求失败')
        return response.json()
    }).then((data)=>{
        if(data.status !== 'ok') throw new Error(data.message || '新闻获取失败')
        if(data.articles.length === 0) {
            newsList.innerHTML = '<li>未找到相关新闻内容</li>'
            return
        }
        data.articles.forEach(article => {
            let li = document.createElement('li')
            // 兼容无封面图的情况，避免显示破裂图片
            const imgHtml = article.urlToImage ? `<img src="${article.urlToImage}" alt="${article.title}">` : ''
            li.innerHTML = `
                ${imgHtml}
                <a href="${article.url}" target="_blank">${article.title}</a>
            `
            newsList.appendChild(li)
        });
    }).catch(err => {
        newsList.innerHTML = `<li>加载出错：${err.message}</li>`
        console.error(err)
    })
}

// 提交事件处理逻辑
function handleSubmit(e){
    e.preventDefault()
    // 获取输入框的搜索内容
    const searchVal = e.target.querySelector('.searchBox').value.trim()
    if(!searchVal) return
    // 触发搜索请求
    fetchNews(searchVal)
}

form.addEventListener('submit', handleSubmit)

// 可选：页面加载时默认展示热点新闻
fetchNews('热点')

核心修改说明 #

• 修正了表单选择器错误，原代码中form类名为searchform，JS选择器误写为form.search，导致提交事件完全没有绑定成功
• 将新闻请求逻辑封装为可复用函数，搜索提交时传入关键词触发请求，解决了原代码仅在页面加载时请求一次、不会响应搜索操作的问题
• 修正了URL字符串的语法错误，原代码用单引号包裹URL，无法解析${search}变量，改为反引号实现模板字符串功能
• 修正了HTML列表结构，避免嵌套li导致的DOM渲染异常
• 优化了日期参数，自动生成最近30天的日期，避免请求过旧内容返回空结果
• 增加了错误处理、空结果提示、封面图缺失兼容等边界情况处理

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