Counter variable inside function of a loop with onchange

Question

Hello this is my for loop to create a table. Inside this table there are different function.

for (var id_day = 1; id_day < 32; id_day++)
{
    var tr = document.createElement("tr");  

    for (var i = 0; i < 3; i++)
    {
        var td = document.createElement("td");

        if (i == 0)
            td.innerHTML = id_day;
        if (i == 1)
        {
            var element = document.createElement("input");
            element.type = "text";
            element.id = "quantity_delivered_" + id_day;
            element.name = "quantity_delivered";
            element.value = "0.00";
            element.onchange = function(){update_input_detail(this.id, this.value, id_day, id_ddt, id_product);};
            td.appendChild(element);
        }
        if (i == 2)
        {
            var element = document.createElement("input");
            element.type = "text";
            element.id = "quantity_returned_" + id_day;
            element.name = "quantity_returned";
            element.value = "0.00";
            element.onchange = function(){update_input_detail(this.id, this.value, id_day, id_ddt, id_product);};
            td.appendChild(element);
        }

        tr.appendChild(td);
    }

    tbody.appendChild(tr);
}

Inside .onchange function id_day is always the last index 32 but i need that id_day is a different number for each function.

id_day variable is always 32 but i need that id_day is 1,2,3,4,5 etc. inside .onchange — maskarmusic, Aug 30 '18 at 14:31

score 0 · Answer 1 · answered Aug 30 '18 at 14:52

id_day is always 32 as by the time onchange is called the loop has finished and set id_day++ 32 times.

A quick fix would be to replace var with let in

for (let id_day = 1; id_day < 32; id_day++) {

but refactoring the code to remove the inlined functions would make it easier to read and have the side effect of making the scope changes clearer

Counter variable inside function of a loop with onchange

1 Answers1