PDA

View Full Version : problem creating element

nickfox
09-19-2006, 02:02 AM
I am trying to create a set of checkboxes. If I create 2 checkboxes in the following code. I get a length of 2 from the statement:

document.theform.mycheckbox.length

If I remove the second createElement and only create one, I get undefined instead of document.theform.mycheckbox.length = 1.

why don't I get 1?

thanks
Nick

<html><head><title></title>
<script type="text/javascript">
function load () {
var theform = document.getElementById('theform');
var el = document.createElement('input');
el.type = 'checkbox';
el.id = 'mycheckbox';
el.name = 'mycheckbox';
el.value = 'mycheckboxvalue';
theform.appendChild(el);

// REMOVE THIS SECOND ELEMENT
var el2 = document.createElement('input');
el2.type = 'checkbox';
el2.id = 'mycheckbox';
el2.name = 'mycheckbox';
el2.value = 'mycheckboxvalue2';
theform.appendChild(el2);

if (document.theform.mycheckbox) {
document.body.innerHTML += 'document.theform.firstChild.id: ' + document.theform.firstChild.id + '<br>';
document.body.innerHTML += 'document.theform.mycheckbox.length: ' + document.theform.mycheckbox.length + '<br>';
}
}
</script>
</head>
<body onload="load()">
<form id="theform" name="theform"></form>
</body></html>
nikkiH
09-19-2006, 03:33 PM
"why don't I get 1?"

Because it's only an array if there is more than one. Otherwise, it's just one element and an array is not created.

Gotta love loose variable typing.
Kor
09-19-2006, 10:12 PM
"why don't I get 1?"

Because it's only an array if there is more than one. Otherwise, it's just one element and an array is not created.

Gotta love loose variable typing.
Oh, not exactly. If you use DOM reference document.getElementsByName() or document.getElementsByTagName(), there will be an array, nomatter the number of the elements...... If only one, it will be the [0] indexed, and the length of the collection it will be 1.

...and don't use innerHTML for this kinda job. It is not a standard DOM method.
nikkiH
09-19-2006, 11:29 PM
True.
I was specifically referring the method used by the OP, which referenced the form elements as actual form elements.
document.theform.mycheckbox.length
Kor
09-20-2006, 08:19 AM
In other words, nickfox, use DOM:

document.getElementsByName('mycheckbox')
instead of
document.theform.mycheckbox

There are a couple of other problems in your code.
- reference by childhood is a tricky problem, due to the fact that IE and Mozilla counts in different ways the children (Moz counts all the possible textnodes - the gaps - as childs, while IE counts only some of them). Thus, firstChild will not work in Mozilla the way you have written the code. Should have been:

var firstKid= document.getElementsByName('theform')[0].firstChild
while(firstKid.nodeType!=1){
firstKid=firstKid.nextSibling;
}

But in case of the form's controls, you may use the classical reference

var firstFormsElement=document.forms['theform'].elements[0];

- another problem is the way IE handles the operator += in case of innerHTML method. To avoid errors, you should append the final string once, after the concatenating process.

var mystring='';
mystring+=somevalue;
root.innerHTML=mystring;

- another problem is an IE bug. IE is not abble to attach the name attribute to new created form's group of elements which must have the same name (radios or checkboxes) in the classical DOM way, thus you must use a workaround like
.......
if(document.all){//IE
var newInput=document.createElement('<input type="checkbox" name="mycheckbox">')
}
else{//full DOM compliant browsers
var newInput=document.createElement('input');
newInput.type="checkbox";
newInput.name="mycheckbox";
}
.......