点击Search按钮后获取输入值存入localStorage并调用OMDbAPI的问题

核心问题原因 #

你在browse函数里用event.target.value是错误的——onsubmit事件的event.target指向的是form表单元素，表单本身没有value属性，自然拿不到输入内容。

修正步骤及完整代码 #

1. 修正browse函数：正确获取输入框值并触发搜索

通过输入框的id直接获取元素，拿到输入值后存入localStorage，再调用main函数执行新搜索：

2. 优化main函数：处理空输入、API异常等边界情况

3. 修复movieHTML函数：替换转义字符为正常HTML标签，避免渲染异常

完整修正代码 #

JavaScript 代码

const movieListEl = document.querySelector('.shows');
const savedSearchKey = localStorage.getItem("key");

// 页面加载时，若有保存的关键词则自动搜索
if (savedSearchKey) {
    main(savedSearchKey);
    document.getElementById('searchbar').value = savedSearchKey;
}

async function main(searchTerm) {
    // 空关键词不发起请求
    if (!searchTerm) return;
    
    const url = `https://www.omdbapi.com/?apikey=39a36280&s=${encodeURI(searchTerm)}`;
    try {
        const search = await fetch(url);
        const data = await search.json();
        
        // 处理无搜索结果的情况
        if (!data.Search) {
            movieListEl.innerHTML = '<p>未找到相关电影</p>';
            return;
        }
        
        movieListEl.innerHTML = data.Search.map(movie => movieHTML(movie)).join("");
    } catch (err) {
        movieListEl.innerHTML = '<p>搜索出错，请稍后重试</p>';
        console.error(err);
    }
}

function browse(event) {
    event.preventDefault();
    const searchInput = document.getElementById('searchbar');
    const searchValue = searchInput.value.trim();
    
    // 空输入不执行后续逻辑
    if (!searchValue) return;
    
    localStorage.setItem("key", searchValue);
    main(searchValue);
    // 清空输入框（可选）
    searchInput.value = '';
}

function movieHTML(details) {
    // 处理海报地址为N/A的情况，替换为占位图
    const posterSrc = details.Poster !== 'N/A' ? details.Poster : 'https://via.placeholder.com/200x300?text=No+Poster';
    return `
<div class="shows__content">
    <figure class="shows__poster">
        <img src="${posterSrc}" alt="${details.Title}海报" class="poster">
    </figure>
    <div class="poster__description">
        <h4 class="poster__title">${details.Title}</h4>
        <p class="poster__year">${details.Year}</p>
    </div>
</div>
    `
}

HTML 代码（无需修改）

<form action="" id="movie__searchbox" class="nav__search-bar" onsubmit="browse(event)">
    <input type="text" id="searchbar" class="nav__search" placeholder="Search" />
    <button type="submit">Search</button>
</form>
<div class="shows"></div>

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