// display all movies in local storage
function displayMovie() {
console.log("call dispal");
let moviePanel = document.getElementById("movie-panel");
for (i; i < movieStorage.length; i++) {
let title = movieStorage[i].title;
let year = movieStorage[i].year;
let rating = movieStorage[i].rating;
console.log(i," " ,movieStorage.length)
appendMovie(i, title, year, rating);
}
}
function appendMovie(i, title, year, rating) {
console.log("appendMovie index, ", i);
let template = document.querySelector("#entry-temp");
let tempNode = template.content.cloneNode(true);
tempNode.querySelector("#li-movie-title").innerHTML = title;
tempNode.querySelector("#li-movie-year").innerHTML = year;
tempNode.querySelector("#li-movie-rating").innerHTML = "Rated: "+rating;
tempNode.querySelector('#movie-edit').addEventListener("click", function(e, i) { editMovie(i, title, year, rating);});
let moviePanel = document.getElementById("movie-panel");
moviePanel.appendChild(tempNode);
}
function editMovie(index, title, year, rating) {
console.log("index ", index);
console.log("title ", title);
to_be_replace = index;
document.getElementById("add-dialog").show();
document.getElementById('request-save').removeEventListener("click", saveMovieTemp);
document.getElementById('request-save').addEventListener("click", saveEditMovieTemp);
document.getElementById("movie-title").value = title;
document.getElementById("movie-year").value = year;
document.getElementById("movie-rating").value = rating;
}
所以,基本上,我希望函数 editMovie
记住索引,即 i。
因此,下次按下按钮时,可以使用相应的 i
,即创建按钮时的那个。
但是,正如控制台日志所示,标题已正确保存,但索引未定义。这确实很奇怪。
有人知道原因吗
最佳答案
您正在遮蔽外部 i
tempNode.querySelector('#movie-edit').addEventListener("click", function(e, i) {
editMovie(i, title, year, rating);
});
尝试
tempNode.querySelector('#movie-edit').addEventListener("click", function(e) {
editMovie(i, title, year, rating);
});
相反。
关于javascript - 无法将变量传递给事件监听器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58940481/