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??

Please use `console.log()` and not `alert()`. Add code in your question, not only a link. Explain what you are trying to achieve. — user13500, Feb 28 '14 at 10:04

score 4 · Accepted Answer · edited May 23 '17 at 12:10

4

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

edited May 23 '17 at 12:10

Community

1
1

answered Feb 28 '14 at 10:12

user13500

3,817
2
26
33

1

@ciaodarwin: Oh, many a man has done that before you. One of the reasons I like to declare variables at top of scopes. – user13500 Feb 28 '14 at 10:24
@ciaodarwin: And on that note it is of course imperative that we actually define the variables we use, else they end up in global scope. If you want to harder track that sort of issues wrap all your code into a function statement where you add "use strict";. This way you will get error if you try to use a undefined variable. JSLint is also useful in these cases. – user13500 Feb 28 '14 at 11:21

Amir Sherafatian · Answer 2 · 2014-02-28T10:33:02.480

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;

Javascript for loop stops if statement

2 Answers2