Question

我使用for循环使用此代码在javascript中创建了文本框：

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

我创建了一个按钮onclick功能我希望以这种格式检索每个num的值：（num1 + num2 + num3）三个文本框的每个文本框，每个文本框在不同的行中。

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

实际执行此脚本后，您生成的HTML将是

enter image description here

因此，您生成的文本字段的ids等于0,1,2，但在您的代码中，您可以使用tx0，tx1，tx2来获取值没有包含这些ID的组件，因此只需将onclick函数调整为

即可

 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;
        };

它会正常工作here是工作示例的bin :)

Answer 2

好的，我终于想到了什么，并删除了我以前的答案。这是新的

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

您的代码有几个问题

1.当你给sub输入字段id时，它是“tx”+某个x索引但是它可以是多个具有相同名称的字段，你应该给出一个唯一的名称。

2. onclick函数循环直到i＆lt; 3但它可以少于3个字段，因为字段数取决于在“父”字段中输入的数字。

发布代码应该解决问题。

如何在javascript中使用for循环从创建的文本框中检索值？

2 个答案: