Javascript - Create element select from input

Question

I am learning using the events via "nodes" system. But I always have problems with select and options item. The code is good, it works on my local dev. Unfortunately, I had some bugs in JsFiddle =(

Here is the situation.

We have an input, when I type (3 for exemple) and click to "add", I have two inputs (name + surname) that appears for 3 persons in the div "childrenContainer".

Here is the HTML

<h1>Book</h1>
    <label for="nbEnfants">Number : </label>
    <input type="text" id="nbEnfants">
    <button id="addChildren">Add</button>
    <div id="childrenContainer">

Here is the Javascript

    document.getElementById("addChildren").addEventListener('click',
    function(){
        var nbEnfants = document.getElementById("nbEnfants").value;
        var childrenContainer = document.getElementById("childrenContainer");

        for(var i=0; i<nbEnfants; i++){

            //First added Input
            childrenContainer.appendChild(document.createTextNode("Name : " + (i+1) + " "));
            var input = document.createElement("input");
            childrenContainer.appendChild(input);
            input.setAttribute('type', 'text');
            childrenContainer.appendChild(document.createElement("br"));

            //Second input
            childrenContainer.appendChild(document.createTextNode("Surname : " + (i+1) + " "));
            var input2 = document.createElement("input");
            childrenContainer.appendChild(input2);
            input2.setAttribute('type', 'text');

            childrenContainer.appendChild(document.createElement("br"));
            childrenContainer.appendChild(document.createElement("br"));

        } 
    }
);

This code is good, but I need to add a drop down (select options) for the age of children (1 to 12). Adding inputs is good for me, but adding a select is a little difficult, because I need another loop into this one for adding the age for each children.

I wrote a little idea if it helps you

for(var i = 0; i<12; i++){
                    var select = document.createElement("select");
                    select.setAttribute("name", "selectChildren");
                    select.setAttribute("id", "selectChildren");
                    var option = document.createElement("option");
                    option.setAttribute("value", "value");
                    option.innerHTML = i;
                    select.appendChild(option);
                    childrenContainer.appendChild(document.createElement("br"));
                }

But I don't know how to add a entire drop down after my click event and for each children with his inputs.

I can give you more details if you need help =)

I need explanations if you have a solution, not only the solution, because I will not learn like this =D

Thank you for taking time on my issue =)

Answer 1

Use a different iterator for adding options to the select list

Since i is already used to add each set of inputs, use another variable (e.g. var j) when adding options to the select list.

Create the select list, then add options, then add the list to the DOM

When creating a new select list, we want the id attribute to be unique (refer to the MDN documentation as to why it should be unique) - and perhaps the name attribute should be unique too, especially the form is being submitted with traditional methods (e.g. regular form submit, not AJAX)

var select = document.createElement("select");
select.setAttribute("name", "selectChildren");
select.setAttribute("id", "selectChildren" + i);
for (var j = 0; j < 12; j++) {
     var option = document.createElement("option");
     option.setAttribute("value", j+1);
     option.innerHTML = j + 1;
     select.appendChild(option);
}
childrenContainer.appendChild(select); //Add the select list to the DOM

Additionally, you can make the type attribute of the Number input number so it will only allow numbers. If you wanted to only allow a range of integers, you could use a select list for that instead.

 document.getElementById("addChildren").addEventListener('click',
   function() {
     var nbEnfants = document.getElementById("nbEnfants").value;
     var childrenContainer = document.getElementById("childrenContainer");

     for (var i = 0; i < nbEnfants; i++) {

       //First added Input
       childrenContainer.appendChild(document.createTextNode("Name : " + (i + 1) + " "));
       var input = document.createElement("input");
       childrenContainer.appendChild(input);
       input.setAttribute('type', 'text');
       childrenContainer.appendChild(document.createElement("br"));

       //Second input
       childrenContainer.appendChild(document.createTextNode("Surname : " + (i + 1) + " "));
       var input2 = document.createElement("input");
       childrenContainer.appendChild(input2);
       input2.setAttribute('type', 'text');

       childrenContainer.appendChild(document.createElement("br"));
       childrenContainer.appendChild(document.createElement("br"));
       var select = document.createElement("select");
       select.setAttribute("name", "selectChildren");
       select.setAttribute("id", "selectChildren" + i);
       for (var j = 0; j < 12; j++) {
         var option = document.createElement("option");
         option.setAttribute("value", "value");
         option.innerHTML = j + 1;
         select.appendChild(option);
       }
       childrenContainer.appendChild(select);
       childrenContainer.appendChild(document.createElement("br"));

     }
   }
 );

 <h1>Book</h1>
<label for="nbEnfants">Number :</label>
<input type="number" id="nbEnfants">
<button id="addChildren">Add</button>
<div id="childrenContainer">