遍历列表时使用innerHTML给onClick传对象参数报语法错误如何解决

问题原因 #

你遇到的语法错误由两个问题共同导致：

• 取值逻辑错误：forEach遍历的第一个参数movie就是当前循环的单条电影对象，你写的movie[index]属于无效取值，本身返回undefined
• 内联事件传参错误：直接把对象嵌入字符串模板的内联onclick事件里时，JS会自动将对象转为[object Object]字符串，最终渲染出来的事件代码是showMovieInfo([object Object])，属于非法JS语法，直接触发解析错误。

修复方案（推荐写法，避免内联事件问题） #

不要使用内联onclick，改用addEventListener绑定点击事件，可直接传递当前循环的movie对象，修改后的showMovies函数代码如下：

function showMovies(data){
    main.innerText = '';
    data.forEach((movie) => {
        let {title, poster_path, release_date, overview} = movie;
        let movieEl = document.createElement('div');
        movieEl.classList.add('movie');
        movieEl.innerHTML = `
            <div class="movie-card" style="cursor: pointer;">
                <img src="${IMG_URL + poster_path}" alt="${title}">
                <div class="movie-info">
                    <h3>${title}</h3>
                    <span>${release_date ? release_date.slice(0,4) : '未上映'}</span>
                </div>

                <div class="overview">
                    ${overview}
                </div>
            </div>
        `
        // 绑定点击事件，直接传入当前movie对象
        movieEl.querySelector('.movie-card').addEventListener('click', () => {
            showMovieInfo(movie)
        })
        main.appendChild(movieEl)
    })
}

如果一定要用内联事件的写法，可以将对象转为JSON字符串并转义引号，写法如下（不推荐，容易出现转义问题）：

<div onclick='showMovieInfo(${JSON.stringify(movie).replace(/'/g, "&apos;")})' style="cursor: pointer;">

修改后点击电影卡片即可在控制台正常打印对应的电影信息。

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