Javascript for loop stops if statement

Question

I'm programming a formgenerator with javascript and php.. I've a little problem with Javascript

The code stops in at line 43. After he finished the for loop, why does he quit the if statement, too?

script.js

function addrow(){
var table = document.getElementById('table_actions')
var row   = table.insertRow(-1);
addcell(table, row);
}


function addcell(table, row){

// ------Config file -----

var object = new Array();
object[0] = "Text";
object[1] = "Password";
object[2] = "Checkbox";
object[3] = "Radio";
object[4] = "Label";
object[5] = "Textarea";

// --------End Config file -----

for (var i = 0; i < 4; i++) {
    console.log(i);
    var cell = row.insertCell(i);
    if (i == 0){
        var input = document.createElement('input');
        input.setAttribute('type', 'text');
        input.setAttribute('name', 'beschriftung');
        cell.appendChild(input);
    } else if (i == 1) {
        var input = document.createElement('input');
        input.setAttribute('type', 'text');
        input.setAttribute('name', 'name');
        cell.appendChild(input);
    } else if (i == 2) {
        var dropdown = document.createElement('select');
        for (var i = 0; i < object.length; i++) {
            var option  = document.createElement('option');
            option.text = object[i];
            option.value   = object[i];
            dropdown.options.add(option);
            cell.appendChild(dropdown);
        }
        continue;
    } else if (i == 3) {
        var checkbox = document.createElement('input');
        checkbox.setAttribute('type', 'checkbox');
        checkbox.setAttribute('name', 'pflicht');
        cell.appendChild(checkbox);
    } else {
        cell.setAttribute('name', i);
    } 
}
}

html

        <form action="site.php" method="post">
        <div class="actions">
            <table id="table_actions">
                <tr>
                    <th>Beschriftung</th><th>Name</th><th>Objekt</th><th>Pflichtfeld</th>
                </tr>
            </table>
            <div id="click" onclick="addrow()">+</div>
            <input type="submit" value="Erstellen!" class="action-btn">
        </div>
    </form>

Please take a look here

Why does javascript quit the if statement after the for loop at line 43??

Answer 1

You are using the same variable i inside the if statement loop thus at end it is object.length .

for (var i = 0; i < 4; i++) {
    if (i == 0) {
        ...
    } else if (i == 2) {
        for (var i = 0; i < object.length; i++) {
           ...
        }
        // Now i === object.length
    } ...
}

Had to look around a bit, but this answer gives you some detail that can be of use:

• Javascript - scope of nested for loop index

Answer 2

the inner loop corrupt, the i counter used for main loop:

} else if (i == 2) {
var dropdown = document.createElement('select');

    // this :
    //for (var i = 0; i < object.length; i++) {

    // its needs to be changed to `j` for example, like:
    for (var j = 0; j < object.length; j++) {

    var option  = document.createElement('option');
    option.text = object[j];     // also i references needs to be changed to j
    option.value   = object[j];  // also i references needs to be changed to j
    dropdown.options.add(option);
    cell.appendChild(dropdown);
    }
    continue;