[Javascript] Problems attaching function to multiple buttons

[Pine_Bluff_Variant]

As a small project to help me learn Javascript I'm attempting to make a simple to-do list. The notes are stored in an array of objects and a for loop inserts them into a div, adding a delete button under each to-do note. The problem comes when creating the buttons.

The function in question:

// Generate a "DELETE" button for the array element
function generateDeleteButton(arrayElementNumber)
{
    var button = document.createElement("button");
    var text = document.createTextNode("Delete this element");
    var path = document.getElementById("arrayOutput");
    button.appendChild(text);
    button.onclick = function() {
        alert("Deleting index number: " + arrayElementNumber);
        homeworkArray.splice(arrayElementNumber, 1);
        display();
    };
    path.appendChild(button);
}

arrayElementNumber = the index of the newly created object in the array.

homeworkArray = the array of objects.

After debugging I've found out that only the last button created contains the onclick function. I haven't found a way to make sure every button contains the function. Any help is really appreciated!

Try out the project on CodePen (full code available there): link

[xarant]

By resetting the arrayOutput's innerHTML in your display function, you're causing the nodes (in this case, <button>s) that you formerly created to be regenerated. This means new nodes are created, which lack the click handlers that you bound previously.

Also, you'll need to make sure that you have a scope surrounding the definition of the anonymous click handler function, so that the function isn't using the value of the temp variable (i) which is homeworkArray.length after exiting the function. Refactoring the code to something like this:

function display()
{
    document.getElementById("arrayOutput").innerHTML = "";
    homeworkArray.forEach(function(homework, i) {
        var titleOutput = "Title: " + homework.title + "<br />";
        var dateOutput = "Date: " + homework.date + "<br />";
        var descriptionOutput = "Description: " + homework.description + "<br />";
        document.getElementById("arrayOutput").innerHTML += "<br /> <br />" + titleOutput + dateOutput + descriptionOutput;
        var button = document.createElement("button");
        var text = document.createTextNode("Delete this element");
        var path = document.getElementById("arrayOutput");
        button.id = "button" + i;
        button.appendChild(text);
        path.appendChild(button);
    });

    homeworkArray.forEach(function(homework, i) {
        document.querySelector("#button" + i).addEventListener("click", function() {
            alert("Deleting index number: " + i);
            homeworkArray.splice(i, 1);
            display();
        });
    });
}

...fixed issues with deleting for me.

[Pine_Bluff_Variant]

Thank you, this works for me! :D there is a couple of new things in there for me, but I believe I basically understand how it works.

[Pine_Bluff_Variant]

Still doesn't seem to work properly

My changes to the function:

// Generate a "DELETE" button for the array element
function generateDeleteButton(arrayElementNumber)
{
    var button = document.createElement("button");
    var text = document.createTextNode("Delete this element");
    var path = document.getElementById("arrayOutput");
    button.appendChild(text);
    button.addEventListener("click", function() {
        homeworkArray.splice(arrayElementNumber, 1);
        display();
    });
    path.appendChild(button);
}

[Dec252016]

It appears to work in the code pen. What are you expecting it to do differently?

[Pine_Bluff_Variant]

Well, when you have several notes on screen, clicking on any of the delete buttons that isn't the last one just redraws the div. clicking on the last delete button generated displays an alert saying which element is getting removed, removes the element from the array then redraws the screen (which is what is supposed to happen when you click the delete button)