CODEWITHSUNDEEP
javascripthtml
echo Lee
echo Lee

Reputation: 341

fail to pass variable to event listener

// 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?

Thank you! enter image description here

Upvotes: 0

Views: 26

Answers (1)

AKX
AKX

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

Related Questions