点击按钮触发Uncaught ReferenceError: tt4853102未定义错误求助

问题现象 #

点击「more details」按钮时触发以下错误：

Uncaught ReferenceError: tt4853102 is not defined
at HTMLButtonElement.onclick

触发错误的按钮代码：

<button onclick="getOneFilm(${this.id})" class="btn position-absolute hre btn-success col-12">more details</button>

错误原因 #

按钮的onclick属性中，${this.id}渲染后是字符串类型的imdbID（比如tt4853102），但直接写getOneFilm(tt4853102)会被JS解释器当成变量——而这个变量从未定义，因此抛出引用错误。核心问题是：字符串参数没有加引号，导致JS把它识别为未定义的变量。

解决方案 #

方案1：给字符串参数添加引号 #

修改Films类的renderIn方法中按钮的代码，把${this.id}用单引号包裹：

renderIn(elem) {
    console.log(this.id)
    elem.innerHTML +=
        `<div class="card position-relative  mr-2 mb-2" style="width: 16rem;height:34rem">
                <img class="card-img-top" height='350px' src="${this.poster}" alt="Card image cap">
                <div class="">
                    <h5 class="card-title text-center p-2">${this.title}</h5>
                    <p class="card-text text-center">${this.type}</p>
                    <p class="card-text text-center">${this.year}</p>
                    <button onclick="getOneFilm('${this.id}')" class="btn position-absolute hre btn-success col-12">more details</button>
                </div>
            </div>`
}

渲染后的按钮代码会变成onclick="getOneFilm('tt4853102')"，JS会把'tt4853102'识别为字符串参数，正确传递给getOneFilm函数。

方案2：使用事件委托（更推荐） #

内联onclick不利于代码维护，推荐用事件委托统一处理按钮点击：

1. 移除renderIn方法中按钮的onclick属性，添加data-film-id存储电影ID：

renderIn(elem) {
    console.log(this.id)
    elem.innerHTML +=
        `<div class="card position-relative  mr-2 mb-2" style="width: 16rem;height:34rem">
                <img class="card-img-top" height='350px' src="${this.poster}" alt="Card image cap">
                <div class="">
                    <h5 class="card-title text-center p-2">${this.title}</h5>
                    <p class="card-text text-center">${this.type}</p>
                    <p class="card-text text-center">${this.year}</p>
                    <button data-film-id="${this.id}" class="btn position-absolute hre btn-success col-12">more details</button>
                </div>
            </div>`
}

2. 在全局范围给app元素绑定点击事件委托：

// 放在代码合适位置（比如click事件绑定之后）
app.addEventListener('click', (e) => {
    if (e.target.classList.contains('btn-success')) {
        const filmId = e.target.dataset.filmId;
        getOneFilm(filmId).then(res => {
            console.log(res);
            // 可在此添加详情展示等后续逻辑
        });
    }
});

这种方式避免了内联事件的弊端，更便于统一管理所有按钮的点击逻辑。

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