// 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;
}

Zasadniczo chcę, aby funkcja editMovie zapamiętała indeks, którym jest i. Zatem następnym razem, gdy przycisk zostanie naciśnięty, można użyć odpowiedniego i, tego, w którym przycisk został utworzony.

Jednak, jak pokazuje dziennik konsoli, tytuł jest poprawnie zapisywany, ale indeks jest niezdefiniowany. To naprawdę dziwne.

Czy ktoś zna powód?

Dziękuję Ci! tu wpisz opis obrazu

0
echo Lee 19 listopad 2019, 21:18
i, który jest przekazywany do detektora zdarzeń, zawsze będzie niezdefiniowany.
 – 
Shubham Jain
19 listopad 2019, 21:21

1 odpowiedź

Osłaniasz zewnętrzne i w

tempNode.querySelector('#movie-edit').addEventListener("click", function(e, i) { 
    editMovie(i, title, year, rating);
});

Próbować

tempNode.querySelector('#movie-edit').addEventListener("click", function(e) { 
    editMovie(i, title, year, rating);
});

Zamiast.

1
AKX 19 listopad 2019, 21:22