Can some one tell me why is this not working

Question

I have a form where I'd like to add new input fields, and I'm sure I almost got it but something's not working because the name attribute is not auto incrementing.

<button onclick="afunction()">Insert New Text Field</button>
<script>
function afunction() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "text");
    x.setAttribute("value", "something cool");
    for (i = 0; i < 12; i++) {
    x.setAttribute("name","input"+i);
}
document.body.appendChild(x);
}
</script>

Thank you for your valuable help.

Note where you are appending the input, the document body. Is that where you really want it? Surely the is another element you have that it can be appended (in)to? Also, why are you setting the name attribute 12 times? — Jon P, Jun 06 '16 at 03:04
By "that something" I am referring to *"something's not working"*. Please clearly state ***what*** is "not working"; what do you expect this code to do, and what is it doing instead? — deceze, Jun 06 '16 at 03:05
It works ok, the field will be created inside a form. Its working ok, the button does add a text field, the problem is that it's not auto incrementing the name attrib. — Samuel Ramzan, Jun 06 '16 at 03:07
In the future I suggest using someting more meaningful for questions, something that will give us an idea of what the problem is before clicking on the question. E.g: How do I insert new elements into a form? — Jon P, Jun 06 '16 at 03:09
Yes Jon P, you are right, I´m sorry for not specifying what the problem is... I apologize. — Samuel Ramzan, Jun 06 '16 at 03:21

score 2 · Answer 1 · edited May 23 '17 at 11:44

Your for-loop looping from i = 0 to 11 does not make sense. With each loop iteration, you just override the previously set name attribute of the same element x and finally end up with "input" + 11 as the name.

You need to move the declaration of your counter variable (I called it numInputs) outside your function and only increment it by one for each function call, e. g. as follows:

var numInputs = 0;

function addInput() {
  var input = document.createElement("input");
  input.setAttribute("type", "text");
  input.setAttribute("value", "something cool");
  input.setAttribute("name", "input" + numInputs);
  document.body.appendChild(input);
  numInputs++;
  
  // Debug output:
  console.log(document.body.querySelectorAll('input[name^=input]'));
}

<button onclick="addInput()">Insert New Text Field</button>

If you feel more confident in your Javascript programming skills, you can encapsulate your counter variable numInputs and the addInput function as a closure within an Immediately-Invoked Function Expression:

const addInput = (function() {
  var numInputs = 0;
  return function() {
    var input = document.createElement("input");
    input.setAttribute("type", "text");
    input.setAttribute("value", "something cool");
    input.setAttribute("name", "input" + numInputs);
    document.body.appendChild(input);
    numInputs++;

    // Debug output:
    console.log(document.body.querySelectorAll('input[name^=input]'));
  }
})();

<button onclick="addInput()">Insert New Text Field</button>

Thank you, Ok... I can see now where my mistake was... Thank you le_m You nailed it — Samuel Ramzan, Jun 06 '16 at 03:34

IAMZERG · Accepted Answer · 2016-06-06T03:57:51.450

The variable i is always going to evaluate to 11. The for loop will run every time you run that function, and will set the name attribute of your input element to "name0", "name1", "name2", "name3", "name4", "name5", "name6", "name7", "name8", "name9", "name10", and finally... "name11". What you probably want to do is set up a closure to store the value, unless you want to use another attribute on an html element to store the value. My solution is pretty similar to MDN's information on closures here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

Here's what I came up with. Probably more efficient to set a value on an html element and increment that...

<button onclick="afunction()">Insert New Text Field</button>
<script>
function counter() {
  var i = 0;
  return {
    increment: function () {
      i++;
    },
    value: function () {
      return i;
    }
  };
}
var i = counter();
function afunction() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "text");
    x.setAttribute("value", "something cool");

    i.increment();
    x.setAttribute("name","input"+i.value());
    document.body.appendChild(x);
  }

</script>

http://codepen.io/IAMZERG/pen/VjLJwO

What is the advantage of using your counter-object with 'private' variable `i` instead of just a Number, i. e. `var i = 0;`? — le_m, Jun 06 '16 at 03:50
None whatsoever in this case. I created a slightly more coomplicated example to showcase where it might come in handy: http://codepen.io/IAMZERG/pen/qNdzdg — IAMZERG, Jun 06 '16 at 04:21

Can some one tell me why is this not working

2 Answers2