const showMovies = function (title, url, rating, id) {
const newMovieElement = document.createElement('li');
newMovieElement.className = 'movie-element';
newMovieElement.innerHTML = <div class='movie-elementimage'>
<img src='${url}' alt='${title}'>
</div>
<div class='movie-elementinfo'>
<h2>${title} </h2>
<p> ${rating}/5 Stars</p>
</div>
;
document.getElementById('movie-list').append(newMovieElement);
newMovieElement.addEventListener('click', function () {
newMovieElement.style.display = 'none';
});
};
每次调用showMovies函数时，我都会创建一个新的LI，并将其存储在const newMovieElement中。现在假设两次调用此函数，那么最后创建的LI将存储在const newMovieElement中。我还在为删除LI而创建的每个LI上添加一个eventListener。现在，假设我单击第一个LI，然后哪个LI应该消失，因为在单击时newMovieElement.style.display = 'none';，newMovieElement存储了第二个LI，因此这将设置newMovieElement（添加第二个LI）的display:none而不是第一个LI？
结果是，如果我单击第一个LI，那么它只会消失（这确实是必需的），但是从技术上讲，第二个LI不会根据代码消失吗？
每个动态创建的函数（例如，事件处理程序）都将绑定到其周围的范围，因此它可以访问那些变量（包括newMovieElement）。这称为“词汇作用域”或“关闭”。每个newMovieElement包含另一个<li>元素。
在这里阅读：