Reputation: 341
// 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;
}
So, basically, I want function editMovie
remember the index, which is i.
So, next time the button gets pressed, the corresponding i
, the one when the button was created, can be used.
However, as console log shows, title is correctly saved, but index is undefined. That's really strange.
Does anyone know the reason?
Upvotes: 0
Views: 26
Reputation: 169416
You're shadowing the outer i
in
tempNode.querySelector('#movie-edit').addEventListener("click", function(e, i) {
editMovie(i, title, year, rating);
});
Try
tempNode.querySelector('#movie-edit').addEventListener("click", function(e) {
editMovie(i, title, year, rating);
});
instead.
Upvotes: 1