调用showMoviePost函数触发tt0104779未定义错误求助

问题根源 #

你写的onclick="showMoviePost(${movie.imdbID})"在生成HTML后会变成onclick="showMoviePost(tt0104779)"——这里的tt0104779没加引号，浏览器会把它当成变量名，但你根本没定义过这个变量，所以直接报错。

快速修复方案 #

给movie.imdbID加上单引号，把它变成字符串参数传递：

function moviesHTML(movie) {
    return `<div class="book" onclick="showMoviePost('${movie.imdbID}')">
    <figure class="book__img_wrapper">
        <img class="book_img" src=${movie.Poster} alt="">
    </figure>
    <div class="book__title">
        ${movie.Title} - ${movie.Year}
    </div>
    <div class="book__ratings">
        ${movie.Type}
    </div>
    
</div>`
}

这样生成的onclick代码会是showMoviePost('tt0104779')，传递的是字符串，浏览器就能正确识别。

更规范的优化方案（推荐） #

内联onclick事件不利于代码维护，还容易出现这类字符串解析问题，建议用事件委托替代：

1. 先去掉HTML里的内联onclick：

function moviesHTML(movie) {
    return `<div class="book" data-imdbid="${movie.imdbID}">
    <figure class="book__img_wrapper">
        <img class="book_img" src=${movie.Poster} alt="">
    </figure>
    <div class="book__title">
        ${movie.Title} - ${movie.Year}
    </div>
    <div class="book__ratings">
        ${movie.Type}
    </div>
    
</div>`
}

2. 给父元素moviesList添加事件监听，统一处理点击：

async function main() {
    const movies = await fetch ("https://www.omdbapi.com/?apikey=97f5b4c9&s=spider");
    const moviesData = await movies.json();
   
    moviesList.innerHTML = moviesData.Search.map((movie) => moviesHTML(movie)).join("");
    
    // 添加事件委托
    moviesList.addEventListener('click', function(e) {
        const bookEl = e.target.closest('.book');
        if (bookEl) {
            const imdbID = bookEl.dataset.imdbid;
            showMoviePost(imdbID);
        }
    })
}

这种方式不仅避免了字符串解析问题，还能统一管理事件，即使后续动态添加电影元素，也不需要重新绑定事件。

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