Problems with document.createElement

hi,

I have tried to solve the problem differently from my previous post (06-22-2009) on which I had no answer.

The problem now is different

The javascript function addRowToTable() is called by a button, and replies a set of elements (select, input, checkbox) of the form.
In this function, the creation of select calls another function CliK(sel.id)

The problem is that this function tells me error "object required" as if the select Id was not "type"
or the checkbox id was not "key"

Where I go wrong?


Posting the complete code



function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

// chk1 cell
var cellChk1 = row.insertCell(0);
var el = document.createElement("input");
el.type = 'checkbox';
el.name = 'Key' + iteration;
el.id = 'Key' + iteration;
el.className = 'div';
el.checked=false;
el.defaultChecked=false;
cellChk1.appendChild(el);

// Input1 cell
var cellInput1 = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'fld' + iteration;
el.id = 'fld' + iteration;
el.className = 'div';
el.size = 8;
el.onkeypress = keyPressTest;
cellInput1.appendChild(el);

// select1 cell
var cellSel1 = row.insertCell(2);
var sel = document.createElement('select');
sel.name = 'Type' + iteration;
sel.id = 'Type' + iteration;

<%
dim RSType
set RSType = Server.CreateObject("ADODB.RECORDSET")
RSType.ActiveConnection=Objconn
RSType.Open("select * from sys.systypes order by name")

Response.Write("sel.options[0] = new Option('scegli un data type', '');")
i=1
while not RSType.EOF
Response.Write "sel.options[" & i & "] = new Option('" & trim(RSType(0)) & "', '" & trim(RSType(0)) & "');"
RSType.movenext
i=i+1
wend
RSType.close
set RSType=nothing
%>
sel.onchange = CliK(sel.id);
sel.className = 'div';
cellSel1.appendChild(sel);


// Input2 cell
var cellInput2 = row.insertCell(3);
var el = document.createElement('input');
el.type = 'text';
el.name = 'lnt' + iteration;
el.id = 'lnt' + iteration;
el.className = 'div';
el.size = 8;
el.onkeypress = keyPressTest;
cellInput2.appendChild(el);

// Input3 cell
var cellInput3 = row.insertCell(4);
var el = document.createElement('input');
el.type = 'text';
el.name = 'prc' + iteration;
el.id = 'prc' + iteration;
el.className = 'div';
el.size = 8;
el.onkeypress = keyPressTest;
cellInput3.appendChild(el);

// Input4 cell
var cellInput4 = row.insertCell(5);
var el = document.createElement('input');
el.type = 'text';
el.name = 'scl' + iteration;
el.id = 'scl' + iteration;
el.className = 'div';
el.size = 8;
el.onkeypress = keyPressTest;
cellInput4.appendChild(el);

// Input5 cell
var cellInput5 = row.insertCell(6);
var el = document.createElement('input');
el.type = 'text';
el.name = 'dft' + iteration;
el.id = 'dft' + iteration;
el.className = 'div';
el.size = 8;
el.onkeypress = keyPressTest;
cellInput5.appendChild(el);

// chk2 cell
var cellChk2 = row.insertCell(7);
var el = document.createElement("input");
el.type = 'checkbox';
el.name = 'nll' + iteration;
el.id = 'nll' + iteration;
el.className = 'div';
el.checked=false;
el.defaultChecked=false;
cellChk2.appendChild(el);

// chk1 cell
var cellChk3 = row.insertCell(8);
var el = document.createElement("input");
el.type = 'checkbox';
el.name = 'idt' + iteration;
el.id = 'idt' + iteration;
el.className = 'div';
el.checked=false;
el.defaultChecked=false;
cellChk3.appendChild(el);

// Input6 cell
var cellInput6 = row.insertCell(9);
var el = document.createElement('input');
el.type = 'text';
el.name = 'off' + iteration;
el.id = 'off' + iteration;
el.className = 'div';
el.size = 8;
el.onkeypress = keyPressTest;
cellInput6.appendChild(el);

// Input7 cell
var cellInput7 = row.insertCell(10);
var el = document.createElement('input');
el.type = 'text';
el.name = 'inc' + iteration;
el.id = 'inc' + iteration;
el.className = 'div';
el.size = 8;
el.onkeypress = keyPressTest;
cellInput7.appendChild(el);

}


function CliK(idx)
{
if ((document.getElementById('Key' + idx).checked) && (document.getElementById('type' + idx).value) == "int")
{
document.getElementById('idt' + idx).checked=true;
document.getElementById('nll' + idx).checked=false;
document.getElementById('off' + idx).value=1;
document.getElementById('inc' + idx).value=1;
document.getElementById('idt' + idx).disabled=true;
document.getElementById('lnt' + idx).disabled=true;
document.getElementById('nll' + idx).disabled=true;
}
else
{
document.getElementById('idt' + idx).checked=false;
document.getElementById('nll' + idx).checked=true;

}
}


thanks in advance

I resolved in this way

function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var isIE = /*@cc_on!@*/false; // IE detector


// chk1 cell
var cellChk1 = row.insertCell(0);
var el = document.createElement("input");
if(isIE)
{
el=document.createElement('<input type="checkbox" name="Key' + iteration+'" id="Key' + iteration+'">');
}
else
{
el=document.createElement('input');
el.type='checkbox';
el.name='Key'+iteration;
el.id = 'Key' + iteration;
}
el.className = 'div';
el.checked=false;
el.defaultChecked=false;
cellChk1.appendChild(el);

// Input1 cell
var cellInput1 = row.insertCell(1);
var el = document.createElement('input');
if(isIE)
{
el=document.createElement('<input type="text" name="fld' + iteration+'" id="fld' + iteration+'">');
}
else
{
el.type = 'text';
el.name = 'fld' + iteration;
el.id = 'fld' + iteration;
}
el.className = 'div';
el.size = 8;
el.onkeypress = keyPressTest;
cellInput1.appendChild(el);

// select1 cell
var cellSel1 = row.insertCell(2);
var sel = document.createElement('select');
if(isIE)
{
sel=document.createElement('<select name="Type' + iteration+'" id="Type' + iteration+'">');
}
else
{
sel.name = 'Type' + iteration;
sel.id = 'Type' + iteration;
}
<%
dim RSType
set RSType = Server.CreateObject("ADODB.RECORDSET")
RSType.ActiveConnection=Objconn
RSType.Open("select * from sys.systypes order by name")

Response.Write("sel.options[0] = new Option('scegli un data type', '');")
i=1
dim a
while not RSType.EOF
Response.Write "sel.options[" & i & "] = new Option('" & trim(RSType(0)) & "', '" & trim(RSType(0)) & "');"
RSType.movenext
i=i+1
wend
RSType.close
set RSType=nothing
%>
sel.className = 'div';
cellSel1.appendChild(sel);
//sel.onchange = CliK(iteration,sel.id);

sel.onchange = function()
{
if (document.getElementById('Key' + iteration).checked)
{
document.getElementById('nll' + iteration).disabled=true;
}
else
{
if (document.getElementById('idt' + iteration))
{
/*if(document.getElementById('idt' + iteration).Value!=null && document.getElementById('idt' + iteration).Value!='')
{
document.getElementById('idt' + iteration).disabled=false;
}*/
if(document.getElementById('nll' + iteration).Value!=null && document.getElementById('nll' + iteration).Value!='')
{
document.getElementById('nll' + iteration).disabled=false;
}
}
}
}




// Input2 cell
var cellInput2 = row.insertCell(3);
var el = document.createElement('input');
if(isIE)
{
el=document.createElement('<input type="text" size="8" name="lnt' + iteration+'" id="lnt' + iteration+'">');
}
else
{
el.type = 'text';
el.name = 'lnt' + iteration;
el.id = 'lnt' + iteration;
el.size = 8;
}

el.className = 'div';
el.onkeypress = keyPressTest;
cellInput2.appendChild(el);

// Input3 cell
var cellInput3 = row.insertCell(4);
var el = document.createElement('input');
if(isIE)
{
el=document.createElement('<input type="text" size="8" name="prc' + iteration+'" id="prc' + iteration+'">');
}
else
{
el.type = 'text';
el.name = 'prc' + iteration;
el.id = 'prc' + iteration;
el.size = 8;
}
el.className = 'div';
el.onkeypress = keyPressTest;
cellInput3.appendChild(el);

// Input4 cell
var cellInput4 = row.insertCell(5);
var el = document.createElement('input');
if(isIE)
{
el=document.createElement('<input type="text" size="8" name="scl' + iteration+'" id="scl' + iteration+'">');
}
else
{
el.type = 'text';
el.name = 'scl' + iteration;
el.id = 'scl' + iteration;
}
el.className = 'div';
el.size = 8;
el.onkeypress = keyPressTest;
cellInput4.appendChild(el);

// Input5 cell
var cellInput5 = row.insertCell(6);
var el = document.createElement('input');
if(isIE)
{
el=document.createElement('<input type="text" size="8" name="dft' + iteration+'" id="dft' + iteration+'">');
}
else
{
el.type = 'text';
el.name = 'dft' + iteration;
el.id = 'dft' + iteration;
el.size = 8;
}
el.className = 'div';
el.onkeypress = keyPressTest;
cellInput5.appendChild(el);

// chk2 cell
var cellChk2 = row.insertCell(7);
var el = document.createElement("input");
if(isIE)
{
el=document.createElement('<input type="checkbox" name="nll' + iteration+'" id="nll' + iteration+'">');
}
else
{
el.type = 'checkbox';
el.name = 'nll' + iteration;
el.id = 'nll' + iteration;
}
el.className = 'div';
el.checked=false;
el.defaultChecked=false;
cellChk2.appendChild(el);

// chk3 cell
var cellChk3 = row.insertCell(8);
var el = document.createElement("input");
if(isIE)
{
el=document.createElement('<input type="checkbox" name="idt' + iteration+'" id="idt' + iteration+'">');
}
else
{
el.type = 'checkbox';
el.name = 'idt' + iteration;
el.id = 'idt' + iteration;
}
el.className = 'div';
el.checked=false;
el.defaultChecked=false;
cellChk3.appendChild(el);
el.onclick = function()
{
if (document.getElementById('idt' + iteration).checked)
{
document.getElementById('off' + iteration).value=1;
document.getElementById('inc' + iteration).value=1;
document.getElementById('idt' + iteration).disabled=true;
document.getElementById('off' + iteration).disabled=true;
document.getElementById('inc' + iteration).disabled=true;
}
else
{
if ((document.getElementById('idt' + iteration)) && (document.getElementById('Type' + iteration).value == "int"))
{
if(document.getElementById('idt' + iteration).Value!=null && document.getElementById('idt' + iteration).Value!='')
{
document.getElementById('idt' + iteration).checked=false;
}
if(document.getElementById('nll' + iteration).Value!=null && document.getElementById('nll' + iteration).Value!='')
{
document.getElementById('nll' + iteration).checked=true;
}
}
}
}



// Input6 cell
var cellInput6 = row.insertCell(9);
var el = document.createElement('input');
if(isIE)
{
el=document.createElement('<input type="text" size="8" name="off' + iteration+'" id="off' + iteration+'">');
}
else
{
el.type = 'text';
el.name = 'off' + iteration;
el.id = 'off' + iteration;
}
el.className = 'div';
el.size = 8;
el.onkeypress = keyPressTest;
cellInput6.appendChild(el);

// Input7 cell
var cellInput7 = row.insertCell(10);
var el = document.createElement('input');
if(isIE)
{
el=document.createElement('<input type="text" size="8" name="inc' + iteration+'" id="inc' + iteration+'">');
}
else
{
el.type = 'text';
el.name = 'inc' + iteration;
el.id = 'inc' + iteration;
}
el.className = 'div';
el.size = 8;
el.onkeypress = keyPressTest;
cellInput7.appendChild(el);

}



function KeyCliK()
{
if ((document.getElementById('key').checked))
{
document.getElementById('nll').disabled=true;
}
else
{
document.getElementById('nll').disabled=false;

}
}


function IdtCliK()
{
if ( (document.getElementById('idt').checked) && (document.getElementById('type').value) == "int")
{
document.getElementById('off').value=1;
document.getElementById('inc').value=1;
document.getElementById('idt').disabled=true;
document.getElementById('off').disabled=true;
document.getElementById('inc').disabled=true;
}
else
{
if (document.getElementById('idt' + iteration))
{
if(document.getElementById('idt' + iteration).Value!=null && document.getElementById('idt' + iteration).Value!='')
{
document.getElementById('idt' + iteration).checked=false;
}
if(document.getElementById('nll' + iteration).Value!=null && document.getElementById('nll' + iteration).Value!='')
{
document.getElementById('nll' + iteration).checked=true;
}
}
}
}

Should be:

var cellChk1 = row.insertCell(0);
var el;
if(isIE)
{
el=document.createElement('<input type="checkbox" name="Key' + iteration+'" id="Key' + iteration+'">');
}
else
{
el=document.createElement('input');
...


You code is too redundant. Use a loop or an constructor.