iterate div with textboxes and change id using javascript

Question

I try to iterate through each textbox placed in <div class="col-md-2"> using javascript in order to change their Id's like this..

    function iterateBoxesAndSetUniqueIds() {

    var childDivs = document.getElementById('subContent').children;
    //alert(childDivs.length);

    for( i=0; i< childDivs.length; i++ )
    {
        var el = children[i];
        el.name = 'events[' + i + '].Key'; // 
        el.id = 'events[' + i + '].Key';

        el.name = 'events[' + i + '].Value.StartDate'; 
        el.id = 'events[' + i + '].Value.StartDate';

        el.name = 'events[' + i + '].Value.EndDate'; 
        el.id = 'events[' + i + '].Value.EndDate';

        el.name = 'events[' + i + '].Value.Description'; 
        el.id = 'events[' + i + '].Value.Description';
    }

<div id="divcontent">
<div class="form-group" id="subContent">
    <div class="col-md-2">
      <input type="text" name="events[0].Key" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.StartDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.EndDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.Description" value="">
    </div>
    <div class="col-md-2">
      <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>
    </div>
    </div>
<div class="form-group" id="subContent">
    <div class="col-md-2">
      <input type="text" name="events[0].Key" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.StartDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.EndDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.Description" value="">
    </div>
    <div class="col-md-2">
      <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>
    </div>

The result I'm looking for is this...

<div id="divcontent">
<div class="form-group" id="subContent">
    <div class="col-md-2">
      <input type="text" name="events[0].Key" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.StartDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.EndDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.Description" value="">
    </div>
    <div class="col-md-2">
      <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>
    </div>
    </div>
<div class="form-group" id="subContent">
    <div class="col-md-2">
      <input type="text" name="events[1].Key" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[1].Value.StartDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[1].Value.EndDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[1].Value.Description" value="">
    </div>
    <div class="col-md-2">
      <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>
    </div>

But I get a "ReferenceError: children is not defined" error in the javascript when running the javascript function. Can anyone please help out?

UPDATE After changing the function the result now look like this..

<div id="divcontent">

<div class="form-group" id="subContent">
    <div class="col-md-2" id="events[0].Value.Description">
      <input type="text" name="events[0].Key" value="">
    </div>
    <div class="col-md-2" id="events[1].Value.Description">
      <input type="text" name="events[0].Value.StartDate" value="">
    </div><div class="col-md-2" id="events[2].Value.Description">
      <input type="text" name="events[0].Value.EndDate" value="">
    </div>
    <div class="col-md-2" id="events[3].Value.Description">
      <input type="text" name="events[0].Value.Description" value="">
    </div>
    <div class="col-md-2" id="events[4].Value.Description">
      <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>
    </div>
</div>

when using this code..

    function iterateBoxesAndSetUniqueIds() {

    var childDivs = document.getElementById('subContent').children;
    //alert(childDivs.length);

    for( i=0; i< childDivs.length; i++ )
    {
        var el = childDivs[i];
        el.name = 'events[' + i + '].Key'; // 
        el.id = 'events[' + i + '].Key';

        el.name = 'events[' + i + '].Value.StartDate'; 
        el.id = 'events[' + i + '].Value.StartDate';

        el.name = 'events[' + i + '].Value.EndDate'; 
        el.id = 'events[' + i + '].Value.EndDate';

        el.name = 'events[' + i + '].Value.Description'; 
        el.id = 'events[' + i + '].Value.Description';
    }

Answer 1

First of all, the cause of ReferenceError: children is not defined is this code

 var el = children[i];

If you change that to:

var el = childDivs[i];

You get a result where it changes 0,1,2,3,4 for the first ONLY THE FIRST subContent, which is not what you really want.

So what you would like to do is to use querySelector to get all subContents. From there we could change each individual content of that specific subContent.

Assuming there is only 4 fields for each subContent this is your solution

 function iterateBoxesAndSetUniqueIds() { var subContents = document.querySelectorAll("#subContent") //LOOPS OVER ALL SUBCONTENTS for (i = 0; i < subContents.length; i++) { var children = subContents[i].children console.log(children) children[0].children[0].name = 'events[' + i + '].Key'; children[1].children[0].name = 'events[' + i + '].Value.StartDate'; children[2].children[0].name = 'events[' + i + '].Value.EndDate'; children[3].children[0].name = 'events[' + i + '].Value.Description'; } }

Let me explain this code:

1. Get all the subContents

2. For each subcontent I will get all its children

3. for each children aka <div class="col-md-2"> has 1 children input field so I use children[0] so I change the name of that

Answer 2

In your for loop you have children[i] change this to childDivs[i] .

You are referencing a variable children that does not exist in your loop. You need to access each value held in the nodeList childDivs

To solve the second issue you need to use the iteration index i as a vraiable rather than passing it in as a string. Eg:

for( i=0; i< childDivs.length; i++ )
{
    var el = childDivs[i];
    el.name = events[i].Key; // 
    el.id = events[i].Key;

    el.name = events[i].Value.StartDate; 
    el.id = events[i].Value.StartDate;

    el.name = events[i].Value.EndDate; 
    el.id = events[i].Value.EndDate;

    el.name = events[i].Value.Description; 
    el.id = events[i].Value.Description;
}

Although in each iteration of the loop you are now setting name and id differently 4 times. You need to think what value you want to set the id and the name too and just do it once. Eg:

for( i=0; i< childDivs.length; i++ ) {
    var el = childDivs[i];

    el.name = events[i].Key;
    el.id = events[i].Key;
}

Make sure to change events[i].Key to the correct property you want to use. Also I have got rid of the quotes around events[i].Key as these are not needed.

Answer 3

You are using the var children and it doesn't exist. The correct var is childDivs. Here is the correction:

function iterateBoxesAndSetUniqueIds() {

var childDivs = document.getElementById('subContent').children;
//alert(childDivs.length);

for( i=0; i< childDivs.length; i++ )
{
    var el = childDivs[i];
    el.name = 'events[' + i + '].Key'; // 
    el.id = 'events[' + i + '].Key';

    el.name = 'events[' + i + '].Value.StartDate'; 
    el.id = 'events[' + i + '].Value.StartDate';

    el.name = 'events[' + i + '].Value.EndDate'; 
    el.id = 'events[' + i + '].Value.EndDate';

    el.name = 'events[' + i + '].Value.Description'; 
    el.id = 'events[' + i + '].Value.Description';
}