how to make a for loop work in an event listener in javascript

Question

Please the for loop inside the event listener is not working properly. 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>

Hmm, you create a table and assign it to the variable Tbl then use the variable tbl. These are not the same. — phuzi
– phuzi, Commented May 25, 2016 at 10:16
Please provide your html code also, so that people play with it to find a solution. — niyasc
– niyasc, Commented May 25, 2016 at 10:21

Community · Accepted Answer · 2017-05-23 12:24:00Z

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.

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). 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.

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

Collectives™ on Stack Overflow

how to make a for loop work in an event listener in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related