What is wrong with this code?

[Idelso Quintero]

Hi everyone:
Could someone look into what could possibly be wrong in these lines of
code? It looks all good to me but for some reason the combo box that
is created, is not shown with all the properties (attributes) set.
Actually the message box (alert) that is used to review the content of
the SELECT statement, shows that the only attributes set are size = 1
and id = theComboBox. The other two statements, refering to name and
style, are completely ignored, actually never placed as attributes of
the SELECT node. As a result the combo is shown with a defaulted font
size different than the rest of the components in my form.
Any idea?

Thanks a lot

Here is a snipset of the code:

function AddCombo(Names, Values)
{

var ComboBox;
var optionVal;

var i;
var count = Names.length;

ComboBox =document.createElement('SELECT');

optionVal = new Option(Names[0],Values[0],true,true);
ComboBox.options[ComboBox.options.length] = optionVal; //position 0

for (i=1; i < count; i++)
{
optionVal = new Option(Names,Values,false,false);
ComboBox.options[ComboBox.options.length] = optionVal;
}

ComboBox.setAttribute('size','1');
ComboBox.setAttribute('style','font-size:9pt');
ComboBox.setAttribute('name','theComboBox');
ComboBox.setAttribute('id','theComboBox');


alert (ComboBox.outerHTML);

//---- CODE TO PLACE THE COMBO IN THE FORM -----

......

}

 

[Mick White]

Here is a snipset of the code:

function AddCombo(Names, Values)
{

var ComboBox;
var optionVal;

var i;
var count = Names.length;

ComboBox =document.createElement('SELECT');

optionVal = new Option(Names[0],Values[0],true,true);
ComboBox.options[ComboBox.options.length] = optionVal; //position 0

for (i=1; i < count; i++)
{
optionVal = new Option(Names,Values,false,false);
ComboBox.options[ComboBox.options.length] = optionVal;
}

ComboBox.setAttribute('size','1');
ComboBox.setAttribute('style','font-size:9pt');
ComboBox.setAttribute('name','theComboBox');
ComboBox.setAttribute('id','theComboBox');


alert (ComboBox.outerHTML);

//---- CODE TO PLACE THE COMBO IN THE FORM -----

.....

}

What's wrong? It's IE only (outerHTML), and IE has trouble with
"setAttribute()"
Mick

 

[Michael Winter]

On Mon, 11 Oct 2004 19:11:00 GMT, Mick White

[snip]

What's wrong? It's IE only (outerHTML), and IE has trouble with
"setAttribute()"

The *Attribute methods are unnecessary for HTML documents, anyway. Use the
properties provided.

Mike

 

[Fred Oz]

What's wrong? It's IE only (outerHTML), and IE has trouble with
"setAttribute()"
Mick

Somewhat harsh... outerHTML is only being used for debug to check what
is being created.

To the OP - Mick means instead of:

ComboBox.setAttribute('id','theComboBox');

use:

ComboBox.id = 'theComboBox';

Incidentally, this will mean all your "ComboBox" elements will have the
same id ('theComboBox'), which will make your page invalid but it will
still display OK I think, so it's not your biggest error.

Another gratuitous tip: it's now common to declare variables as you use
them, rather than all in a bunch at the top (hey, that's what I was
taught many years ago too...), e.g. your fist few lines change to:

var count = Names.length;
var ComboBox = document.createElement('SELECT');
var optionVal = new Option(Names[0],Values[0],true,true);

ComboBox.options[ComboBox.options.length] = optionVal; //position 0

for (var i=1; i < count; i++)
{

I would also look at your for loop - why not create an option element,
then append it to the select? Your method seems a bit strange to me
(but I'm certainly no expert).


Lastly...


Post some of your HTML that calls the function, presumably you are
sending arrays of names and options...

Cheers, Fred.