Question

请事件监听器内的for循环不能正常工作。它只循环一次而不是用户想要它的次数，并且还保存用户在具有唯一变量名称的表中输入的值。谢谢你帮助

<html>
<script>
    var body = document.body,
    Tbl = document.createElement('table');
    tbl.style.width = '100px';
    tbl.style.border = '2px solid yellow';

    var n = 3;
    for (var i = 0; i < n; i++) {
        var tr = tbl.insertRow(); 
        var td = tr.insertCell(0);
        var tf = tr.insertCell(0);
        var input = document.createElementeElement('input');
        input.name = "inputa" + i ;
        input.id = "inputa" + i; 
        input.value = "";
        var clone = input.cloneNode();
        clone.name = "inputb" + i;
        clone.id = "inputb" + i;
        td.appendChild(clone);
        tf.appendChild(input);
        td.style.border = '2px solid yellow';
        tf.style.border = '2px solid yellow';
    }

    var form = document.createElement("form");
    form.appendChild(tbl);
    body.appendChild(form);
    var submit = document.createElement("input");
    submit.type = "submit";

    form.addEventListener('submit', function(event) {
        event.preventDefault();
        for (var r = 0; r < n; r++) {
            var c = document.getElementById("'inputa' +n-(n-1)").value;
            var d = document.getElementById("'inputb' +n-(n-1)").value;
            f=+c+ +d
            document.write(f);
            document.write(c);
        }
    });

    form.appendChild(submit)
    tableCreate();
</script>
</html>

Answer 1

您的代码中存在大量语法错误。正如phuzi所提到的（how to make a for loop work in an event listener in javascript），Tbl和tbl不一样 - JavaScript区分大小写。

我把它清理了一下，只是让它一直运行。

您似乎尝试在浏览器准备文档后（在submit事件处理程序中）写入文档。这会覆盖当前文档，这就是提交后一切都消失的原因。

你不应该在循环中重新声明变量。在循环之前指定变量，然后只覆盖它们。或者使用let代替var。

我不确定你想要达到的目的，但由于那里有一些求和，我修改了它，因此左栏中的数字与中间列中的数字相加，而总和则呈现为第三列。您可能想要其他东西，但这应该足以让您根据自己的需要进行修改。

＆＃13;

var body = document.body,
  tbl = document.createElement('table');
tbl.style.width = '100px';
tbl.style.border = '2px solid yellow';
var n = 3;
var tr, td, tf, input, clone;
for (var i = 0; i < n; i++) {
  tr = tbl.insertRow();
  td = tr.insertCell();
  tf = tr.insertCell();
  tx = tr.insertCell();
  input = document.createElement('input');
  input.name = "inputa" + i;
  input.id = "inputa" + i;
  input.value = "";
  clone = input.cloneNode();
  clone.name = "inputb" + i;
  clone.id = "inputb" + i;
  td.appendChild(clone);
  tf.appendChild(input);
  clone = input.cloneNode();
  clone.name = "inputx" + i;
  clone.id = "inputx" + i;
  clone.disabled = true;
  tx.appendChild(clone);
  td.style.border = '2px solid yellow';
  tf.style.border = '2px solid yellow';
  tx.style.border = '2px solid grey';
}

var form = document.createElement("form");
form.appendChild(tbl);
body.appendChild(form);
var submit = document.createElement("input");
submit.type = "submit";
form.appendChild(submit);

form.addEventListener('submit', function(event) {
  event.preventDefault();
  var c, d, x;
  for (var r = 0; r < n; r++) {
    c = document.getElementById('inputa' + r);
    d = document.getElementById('inputb' + r);
    x = document.getElementById('inputx' + r);

    if (!c || !d) continue;

    f = parseInt(c.value, 10) + parseInt(d.value, 10);
    x.value = f;
  }
});

＆＃13;

如何在javascript中使事件监听器中的for循环工作

1 个答案: