Problem with checkboxes created through a 'appendchild'

Hi all,

I am experiencing problems while trying to use a checkbox I've created with this code:


var nbCheckBox = 4;
var nbPlayers = 0;
var xmlEvents = new ActiveXObject("Microsoft.XMLDOM");

function OnLoad()
{
var i = 0;
var assault;
var defense;
var PlayerNodes;
var InputNode;
var TDNode;

for(i=0; i!=nbCheckBox; i++)
{
document.event.options[i].checked=true;
}

xmlEvents.async="false";
xmlEvents.load("Events.xml");


assault=document.getElementById('assaultplayers');
defense=document.getElementById('defenseplayers');
PlayerNodes=xmlEvents.getElementsByTagName("Player");
for(i=0; i!=PlayerNodes.length; i++)
{
NewNodeText= document.createTextNode(PlayerNodes.item(i).childNodes.item(0).text);
window.status = PlayerNodes.item(i).childNodes.item(0).text;
TDNode=document.createElement('td');
InputNode= document.createElement('input');
InputNode.type="checkbox";
InputNode.name="players"; TDNode.appendChild(NewNodeText);
TDNode.appendChild(InputNode);
if (PlayerNodes.item(i).childNodes.item(1).text==0)
{
assault.appendChild(TDNode);
}
else
{
defense.appendChild(TDNode);
}
nbPlayers++;
}

Redisplay();

}

In my HTML code, I have got something like this:

<form name="event" bgcolor="gray">
<pre>Display missed shots_____<input type="checkbox" name="options"></input></pre>
<pre>Display successful shots_<input type="checkbox" name="options"></input></pre>
(...)
<p><b>US Army: </b><table style="font-family: Arial; font-size: 9pt" cellspacing="10"> <tr id="assaultplayers"> </tr></table> </p>
<p><b>OP Forces: </b><table style="font-family: Arial; font-size: 9pt" cellspacing="10"> <tr id="defenseplayers"> </tr></table> </p>
</form>

So basically, I create some of the checkboxes manually (their name is 'options'), and some other ones during the execution (name:'players'). All the checkboxes are created, I can use the one called 'option' (with a for(i=0; i!=nbCheckBox; i++)
{
document.event.options[i].checked=true;
}
for exemple), but when I try to access to document.event.players[0] (when the check box players[0] is created), I've got a script error telling me that document.event.players0 is a null object... Does anybody know wgere it comes from?

Thanks a lot

Zillon

When you create your players checkboxes, you're not appending it directly under the event form, you're appending it to a TD.

You may be able to use document.forms['event'].elements['players'][i] and hopefully that works for you. If not, post back and we'll try something else.

Sadiq.

I had already tried without the TD, but I had the same problem. I tried with a document.forms['event'].elements['players'][0].checked=true;
but had the same issue...

Maybe it's bizzare, but you have to set the name in the createElement() method. Found this here:
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20957751.html


...
InputNode= document.createElement('<input name="players">');
...


That should do it. If you alerted the innerHTML of the event form you would notice that you'd have checkboxes with no names...

Hope that helps,
Sadiq.

You're right, it is bizare:)
But it works, thanks a lot

That's odd. I've never had a problem assigning the name of an input of any type - except on radio buttons, for which I have a simple function that handles creation. Checkboxes have always worked just fine for me, in IE/Win and in Gecko.

Here are the "class" wrappers I use for creation:
function Radio (elName, val, chosen) {
if (document.all && document.getElementById) {
// IE radio buttons must be created in this manner to work properly. Proper detection of support is impossible. DAMN YOU IE.
var chk = '';
if (chosen) {
chk = ' checked="checked"';
}
this.element = document.createElement('<input type="radio" id="' + elName + val + '" name="' + elName + '" value="' + val + '"' + chk + '>');
} else {
this.element = document.createElement('input');
this.element.type = 'radio';
this.element.name = elName;
this.element.id = elName + val;
this.element.value = val;
if (chosen) {
this.element.checked = true;
}
}
return this;
}

function Checkbox (elName, val, chosen) {
this.element = document.createElement('input');
this.element.type = 'checkbox';
this.element.name = elName;
this.element.id = elName + val;
this.element.value = val;
this.element.checked = chosen;
return this;
}