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

Question

Please the for loop inside the event listener is not working properly. 请事件监听器中的for循环无法正常工作。 It only loops once instead of the number of times the user wants it to and also saving the values entered by the user in the table with unique variable names.Thank you as u help 它只循环一次，而不是用户想要的次数，并且还用唯一的变量名将用户输入的值保存在表中。感谢您的帮助

<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

There are a lot of syntax errors in your code. 您的代码中有很多语法错误。 As phuzi mentioned ( how to make a for loop work in an event listener in javascript ), Tbl and tbl are not the same - JavaScript is case sensitive. 正如phuzi提到的（如何在javascript中的事件侦听器中使for循环起作用）， Tbl和tbl并不相同Tbl区分大小写。

I cleaned it up a bit, just to make it run at all. 我清理了一下，只是为了使其完全运行。

You seem to try to write to document after it was prepared by browser (in your submit event handler). 您似乎试图在浏览器准备好文档之后（在您的submit事件处理程序中）写文档。 That overwrites current document, and that is why everything disappears after submit. 这将覆盖当前文档，这就是为什么在提交后所有内容都消失了的原因。

You should not redeclare variables inside loop. 您不应在循环内重新声明变量。 Specify your variables before the loop and then just overwrite them. 在循环之前指定变量，然后将其覆盖。 Or use let instead of var . 或者使用let代替var 。

I'm not sure what you tried to achieve, but since there was some summing going on there, i modified it so numbers from left column are summed with numbers from middle column and sum is rendered into third column. 我不确定您要达到的目标，但是由于那里进行了一些求和，因此我对其进行了修改，以便将左列中的数字与中间列中的数字相加，并将总和呈现到第三列中。 You probably wanted something else, but this should be enough for you to modify to suit your needs. 您可能还需要其他东西，但这足以让您进行修改以满足您的需求。

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

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

问题描述

1 个解决方案

解决方案1
1 2016-05-25 10:58:05

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

问题描述

1 个解决方案

解决方案1 1 2016-05-25 10:58:05

解决方案1
1 2016-05-25 10:58:05