How to refer to the value of an input that was created dynamically in JavaScript

Question

I am creating a table of inputs.

When an input is changed, the change event should trigger a function ( updatePlanner() ) to change the data in the underlying data. Here is where I create the table.

function tableCreate(columns, rows){
    var body = document.getElementById('planBuilderTable'),
        tbl  = document.createElement('table');

    // header code removed

    for(var i = 0; i < rows; i++){
        var tr = tbl.insertRow();

        var week = 0;

        for(var j = 0; j < columns * 3; j++){
            var td = tr.insertCell();
            td.style.height = "26px";

            switch(j % 3){
                case 0:
                    var currItem = document.createElement('input');
                    currItem.value = builerObj.dataArray[2][week][i][0];
                    currItem.addEventListener("change", function(){
                        updatePlanner(this.value, week, i, 0);  //<-----------THIS IS MY ISSUE
                    });
                    break;
                case 1:
                    var currItem = document.createElement('input');
                    currItem.value = builerObj.dataArray[2][week][i][1];
                    break;
                case 2:
                    var currItem = document.createElement('button');
                    currItem.style.height = "26px";
                    currItem.style.border = "none";
                    currItem.style.padding = "0px";
                    currItem.style.display = "block";
                    var span = document.createElement('span');
                    if (builerObj.dataArray[2][week][i][2] == 1){
                        span.className = "glyphicon glyphicon-ok box";
                    } else{
                        span.className = "glyphicon box";
                    }
                    currItem.appendChild(span);
                    week += 1;
                    break;
            }

            currID = i.toString() + "-" + j.toString()
            currItem.setAttribute("id", currID);
            currItem.style.width = "40px";


            td.appendChild(currItem);
            td.style.border = '1px solid black';

        }
    }
    body.innerHTML = "";
    body.appendChild(tbl);
}

As you can see I am trying to use this.value , but that isn't returning a value. I've also tried assigning the ID earlier and refer to it:

        ...
        currID = i.toString() + "-" + j.toString();

            switch(j % 3){
                case 0:

                    var currItem = document.createElement('input');
                    currItem.setAttribute("id", currID);
                    currItem.value = builerObj.dataArray[2][week][i][0];
                    currItem.addEventListener("change", function(){
                        updatePlanner(document.getElementById(currID).value, week, i, 0);
                    });
                    break;
                    ...

Answer 1

this.value returns the correct value, but the other parameters, week and i, don't have the values you expect. You want them to have the values at the time the listener was added , but instead, they have the values at the time the listener was executed . To solve this, you can store these values as attributes in the input tag and retrieve them later on, like this:

    $(currItem).attr("data-week", week);
    $(currItem).attr("data-i", i);
    currItem.addEventListener("change", function(){
         var week_value = $(this).attr("data-week");
         var i_value = $(this).attr("data-i");
         updatePlanner(this.value, parseInt(week_value), parseInt(i_value), 0);
    }, false);

Answer 2

There are several things you could be looking for here. The easiest is to add the event argument to the callback function like so:

currItem.addEventListener("change", function(e){
  updatePlanner(e.target.value, week, i, 0);
});