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>
1 answers
solution1
1 2016-05-25 10:58:05
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; } });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.