Question

<script type="text/javascript">
    var a = new Array();
    function obj(type, value) {
        this.type = type;
        this.value = value;
        this.toStr = toStr
    }

    function toStr() {
        if (this.type == "select") {
            var temp = "";
            var arr = this.value.split("/");
            for (i = 0; i < arr.length; i++) {
                temp += "<option>" + arr[i] + "</option>"
            }
            return "<select>" + temp + "</select><br>";
        } else
            return "<input type = '" + this.type + "' value = '" + this.value + "'><br>";
    }

    function addObj(type) {
        var sel = parent.frames["left"].document.form1.q.value;
        for (i = 0; i < sel; i++)
            a[a.length] = new obj(type,
                    parent.frames["left"].document.form1.caption_text.value,
                    a.length);
        paint();
        parent.frames["left"].document.form1.caption_text.value = "";
    }

    function paint() {
        parent.frames["right"].document.open()
        for (i = 0; i < a.length; i++)
            parent.frames["right"].document.writeln(a[i].toStr())
        parent.frames["right"].document.close()
    }
</script>
<form name=form1>
    <table>
        <tr>
            <td><input type="button" style="width: 150px" value="Add Button" onClick="addObj('button')"><br />
                <input type="button" style="width: 150px" value="Add TexBox" onClick="addObj('text')" /><br />
                <input type="button" style="width: 150px" value="Add Select" onClick="addObj('select')" /></td>
            <td>Text : <br /> Number of adding elements:<br /></td>
            <td><input type="text" name="caption_text" style="width: 150px"> <br /> <select
                NAME=q size=1 style="width: 150px">
                    <option selected value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
            </select></td>
        </tr>
    </table>
</FORM>

Code is corrupting when creating select elements.
What’s wrong with this code?

Thanks in advance.

Answer 1

Your i variables are missing a var declaration. All loops use the same counter, which means that nested loops will break horribly. My suggestion:

var a = [];
function FormElement(type, value) {
    this.type = type;
    this.value = value;
}

FormElement.prototype.toString = function toStr(){
    if (this.type == "select") {
        var arr = this.value.split("/");
        for (var i = 0; i < arr.length; i++) {
            arr[i] = "<option>" + arr[i] + "</option>"
        }
        return "<select>" + arr.join("") + "</select><br />";
    } else
        return "<input type = '" + this.type + "' value = '" + this.value + "' /><br />";
};

function addObj(type) {
    var form = parent.frames["left"].document.form1; 
    var sel = form.q.value;
    for (var i = 0; i < sel; i++)
        a.push(new FormElement(type, form.caption_text.value);
    paint();
    form.caption_text.value = "";
}

function paint() {
    var doc = parent.frames["right"].document;
    doc.open();
    doc.write(a.join("\n"));
    doc.close();
}