How to retrieve values from created textboxes using for loop in javascript?

Question

I have created textboxes in javascript using for loop with this code:

for (i = 0; i < 3; i++) {
    var div1 = document.createElement('div');
    div1.setAttribute('id', "di" + i);
    document.getElementById('t').appendChild(div1)

    var tx = document.createElement('input');
    tx.setAttribute('id', i);

    var di = document.getElementById("di" + i);

    di.appendChild(tx);
    var br = document.createElement('br');
    di.appendChild(br);
    tx.onblur = (function (i) {
        return function (evt) {
            num = Number(evt.currentTarget.value);
            var currentId = evt.currentTarget.id;
            var d = document.getElementById('di' + i);
            for (x = 0; x < num; x++) {
                var b = document.createElement('b');
                b.innerHTML = "num" + (x + 1);
                var tx1 = document.createElement('input');
                tx1.setAttribute('id', 'tx' + x);
                d.appendChild(br);
                d.appendChild(b);
                d.appendChild(tx1);
                d.appendChild(br);
            }
        }
    })(i);
    di.appendChild(br);
}

I create a button onclick function i want to retrieve the values of each num in this format: (num1+num2+num3) for each textbox of the three textboxes each one in different line..

var sub = document.getElementById('sub');
sub.onclick = function () {
    for (i = 0; i < 3; i++) {
        cv1 = document.getElementById("tx" + i).value;
        cc += cv1 + "+";
    }
    document.write("(" + cc + ")" + "<br>");
};

Answer 1

actually after executing this script your generated HTML would be

so your generated text fields has the ids equals to 0,1,2 but in your code you r fetching values with something tx0 , tx1 , tx2 so there is no components with these ids so just tweak your onclick function as

 sub = document.getElementById('sub');
cc = "";
        sub.onclick = function () {
            for (i = 0; i < 3; i++) {
                cv1 = document.getElementById( i).value;
                cc += cv1 + "<br/>";
            }
            document.getElementById('a').innerHTML = cc;
        };

and it will work fine here is bin of working example :)

Answer 2

OK, I am finally figured what required and deleted my previous answer. This is the new one

for (i = 0; i < 3; i++) {
    var div1 = document.createElement('div');
    div1.setAttribute('id', "di" + i);
    document.getElementById('t').appendChild(div1)

    var tx = document.createElement('input');
    tx.id = "txt" + i;

    var di = document.getElementById("di" + i);
    di.appendChild(tx);

    var br = document.createElement('br');
    di.appendChild(br);

    tx.onblur = (function (item) {
        return function (evt) {
            num = Number(evt.currentTarget.value);
            var d = document.getElementById('di' + item);
            for (var x = 0; x < num; x++) {
                var b = document.createElement('b');
                b.innerHTML = "num" + (x + 1) + " ";
                var tx1 = document.createElement('input');
                tx1.setAttribute('id', item + 'tx' + x);
                d.appendChild(br);
                d.appendChild(b);
                d.appendChild(tx1);
                d.appendChild(br);
            }
        }
    })(i);
    di.appendChild(br);
}

function show() {
    var cc = "";
    for (var m = 0; m < 3; m++) {
        cc += "(";
        var element = document.getElementById("txt" + m);
        var count = Number(document.getElementById("txt" + m).value);
        if (count > 0) {
            for (var b = 0; b < count; b++) {
                if (b > 0) cc += "+";
                cc += document.getElementById(m + "tx" + b).value;
            }
        }
        cc += ")<br/>";
    }
    document.write(cc);
}

your code has several problems

1. When you give id to sub input field it is "tx" + some x index but it can be more than one field with same name, you should give a unique name.

2. onclick function looping until i < 3 but it can be less than 3 fields cause number of fields depended on number entered in "parent" field.

Posted code should to resolve the problem.