如何在JavaScript中的事件監聽器中使for循環工作

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提到的（如何在javascript中的事件偵聽器中使for循環起作用）， Tbl和tbl並不相同Tbl區分大小寫。

我清理了一下，只是為了使其完全運行。

您似乎試圖在瀏覽器准備好文檔之后（在您的submit事件處理程序中）寫文檔。 這將覆蓋當前文檔，這就是為什么在提交后所有內容都消失了的原因。

您不應在循環內重新聲明變量。 在循環之前指定變量，然后將其覆蓋。 或者使用let代替var 。

我不確定您要達到的目標，但是由於那里進行了一些求和，因此我對其進行了修改，以便將左列中的數字與中間列中的數字相加，並將總和呈現到第三列中。 您可能還需要其他東西，但這足以讓您進行修改以滿足您的需求。

 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