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

279
November 23, 2016, at 4:11 PM

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

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);
});
Answer 2

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);
READ ALSO
iOS Safari not executing .html() jQuery after postback initiated (vb.net)

iOS Safari not executing .html() jQuery after postback initiated (vb.net)

I have an anchor tag that is marked runat="server" and has a Handles save. ServerClick event attached to it.

310
How to add a new Highchart dynamically using Highchartsng

How to add a new Highchart dynamically using Highchartsng

So what I'm trying to do is when a user clicks a button I want to add a new highchart element to the page. Currently I see that my container for the chart shows up but the chart does not.

320
Change css with jQuery in function

Change css with jQuery in function

So, I have a following div's and function:.

354
Mixing tag helpers and jQuery

Mixing tag helpers and jQuery

I'm using MVC 6 along with DataTables. I'd like to know if it's possible to mix tag helpers and jQuery code, something like this (it's not working right now):.

296