IE7 error. No details

[Brandon MUS]

I'm working on a script, and JavaScript isn't my forte by any means. The hopes of the script is to create a list of <input type="radio" />'s, but I'm struggling in IE. I was using innerHTML, but after reading about it, I think I should switch over to DOM (which is why I'm here). My script is pretty straight forward:
//add_color will append a color option to the list
function add_color(colorIndex) {
var colorsContainer = document.getElementById('product_colorsContainer');
var HTML = colorsContainer.innerHTML;

HTML += " <tr>";
HTML += " <td>";
HTML += " <label for=\"product_color["+colorIndex+"]\">";
HTML += " <input type=\"radio\" value=\""+colorsArray[colorIndex][0]+"\" name=\"product_colors\" id=\"product_color["+colorIndex+"]\" onclick=\"javascript:setTimeout('update_sizes("+colorIndex+")', 50);\" /> "+colorsArray[colorIndex][1];
HTML += " </label>";
HTML += " </td>";
HTML += " </tr>";

colorsContainer.innerHTML = HTML;
}

//array for options
var colorsArray =
[
["INSIGNIA", "Insignia"]
, ["ZINFANDE", "Zinfandel"]
, ["CARROT", "Carrot"]
, ["COFFEE", "Coffee"]
];
document.writeln(" <table cellspacing=\"0\" cellpadding=\"0\" id=\"product_colorsContainer\">");
for (var i=0; i<colorsArray.length; i++) {
add_color(i);
}
document.writeln(" </table>");

Firefox seems to accept whatever error I have, but IE7 just says error on line 170, which is a completely random section of code:document.writeln(" <label for=\"product_sizes\" class=\"required\"><strong>Size:</strong></label>");

I've been reading a little about DOM, but I was getting lost with adding nodes and tags and such. Also, if I have a DOM, what do I use to clear it out if I need to re-create it? I have another function function clear_colors() {
var colorsContainer = document.getElementById('product_colorsContainer');
var HTML = "";

colorsContainer.innerHTML = HTML;
}

Thanks.

[Kor]

I've been reading a little about DOM, but I was getting lost with adding nodes and tags and such. Also, if I have a DOM, what do I use to clear it out if I need to re-create it? I have another function function clear_colors() {
var colorsContainer = document.getElementById('product_colorsContainer');
var HTML = "";

colorsContainer.innerHTML = HTML;
}

Thanks.

You must learn DOM, this is it. And innerHTML is NOT a DOM method, you know...

[Brandon MUS]

Yeah, I realize innerHTML is horrible and not a DOM method. Since you guys see what I'm trying to do, can you offer any help/links?

[Brandon MUS]

add_color becomes:
function add_color(colorIndex) {
var colorTable = document.getElementById('product_colorsContainer');
var colorRow = colorTable.insertRow(colorTable.rows.length);
var colorCell = colorRow.insertCell(0);
var colorLabel = document.createElement('label');
colorLabel.setAttribute('for','product_color['+colorIndex+']');
var colorInput = document.createElement('input');
colorInput.setAttribute('type', 'radio');
colorInput.setAttribute('value', colorsArray[colorIndex][0]);
colorInput.setAttribute('name', 'product_colors');
colorInput.setAttribute('id', 'product_colors['+colorIndex+']');
colorInput.setAttribute('onclick', 'javascript:setTimeout(\'update_sizes('+colorIndex+')\', 50)');
var colorText = document.createTextNode(colorsArray[colorIndex][1]);

colorCell.appendChild(colorLabel);
colorLabel.appendChild(colorInput);
colorLabel.appendChild(colorText);
}

But there is something wrong with my <input type="radio" />. In IE I can't even select it and in all browsers, the <label> isn't properly associated (even a hard coded <label> fails). Is there something wrong w/ my code?

[Kor]

Welcome to the tangled world of the browsers' exceptions:D

Unfortunately, even if ECMAScript and DOM exist, no browser (and IE is the most disobedient of all) follows entirely the standards. There are quite a lot of exceptions, you must learn them step by step.

For the begining

- IE does not attach events (onclick, onmouseover...) using setAttribute(). A crossbrowser solution is using DOM level 0 syntax

element.onclick=function(){myFunction()}

- IE does not use the same syntax in case of setting style or class with setAttribute. The crossbrowser solution is the same DOM 0:

element.style.CSSattribute=value

element.className='myClass'

- IE has a bug. It can not assign the name in case of groups of elements with the same name (radio groups, checkboxes with common name) In this case, there is a phoney workaround, using the fact that IE can create elements as HTML full code:

if(window.ActiveXObject){//IE
var colorInput=document.createElement('<input name="product_colors" type="radio">')
}
else{//full DOM compliant
var colorInput=document.createElement('input');
colorInput.name='product_colors';
colorInput.type='radio';
}
..//the rest come back to DOM
}


See, for the begining:
http://www.quirksmode.org/dom/compatibility.html

[Brandon MUS]

Looks like fun.

Is there a difference between:
colorInput.name='product_colors';
colorInput.type='radio';
and
colorInput.setAttribute('type', 'radio');
colorInput.setAttribute('name', 'product_colors');

[Kor]

In your code, no, there is no difference. In fact there is a big difference, technically speaking:

DOM level 0 syntax is both read and write, it is used both to get and to set the attributes

var objName=element.name;
element.name='newname';

DOM 1 syntax makes a difference between get and set

var objName=element.getAttribute('name');
element.setAttribute('name','newname');

There is another difference, more subtle

DOM 0 is based, in the get/set attributes methods, on the JSON (Javascript Object Notation see www.json.org), so that it can also create non-native(custom) new attributes.

element.foo='fee';

,,,but DOM 0 is not able to get non-native attributes if they were previousely set in HTML code

<div id="mydiv" foo="fee">
in this case:

var myFooAttribute=document.getElementById('mydiv').foo

woun't work, but it will work DOM 1 or DOM 2

var myFooAttribute=document.getElementById('mydiv').getAttribute('foo');
or
var myFooAttribute=document.getElementById('mydiv').getAttributeNode('foo').nodeValue;

The general rule might be to use DOM 1+ syntax, but as DOM 1+ syntax is not entirely (or wrong) implemented in the present browsers, whenever are exceptions, go back and use DOM 0 (which is more crossbrowser)

[Brandon MUS]

Thank you for explaining that all. It makes a lot of sense now.