IE7 not setting an array

[Ogre11]

This is completely inexplicable.

The function below gets all forms on the page, gets all form fields in each form and sets each field's onblur and onfocus event handlers to change the css class name. IE7 seems to think my form doesnt have any input fields, and when I alert the length of the fields[0] array I don't get undefined, or null or "", I get [object]! same when I alert fields[0].length.toString() and forms[0].getElementsByTagName('input').length and forms[i].getElementsByTagName('input').length.toString();

It doesn't throw any exceptions when i run it and it works fine in Firefox 2, FireBug even thinks the script is fine (which it is :mad: )

I even tried creating a separate for loop outside the rest of the functionality just for the array of input tags and still nothing!!

here is the page so you can see for yourself http://www.pedigreepalace.com/account/listdog.cfm

THIS MAKES NO SENSE!! :(


//sets the classes for all form objects when they blur and focus
function setBlurAndFocus()
{
var forms = document.getElementsByTagName('form');

for(var i = 0; i < forms.length; i++)
{
var fields = new Array();
var totWidth = 0;
fields[0] = forms[i].getElementsByTagName('input');
fields[1] = forms[i].getElementsByTagName('select');
fields[2] = forms[i].getElementsByTagName('textarea');

for(var k = 0; k < fields.length; k++)
{
//alert(forms[i].getElementsByTagName('input').length + ', ' + j);
for(var j = 0; j < fields[k].length; j++)
{
//alert(k + ', ' + j);
if(fields[k][j].tagName == "INPUT")
{

if(fields[k][j].type != "submit" && fields[k][j].type != "button")
{
if(fields[k][j].type != "file")
{
totWidth += fields[k][j].offsetWidth;
}

fields[k][j].className = 'blur';

fields[k][j].onblur = function()
{
this.className = 'blur';
}

fields[k][j].onfocus = function()
{
this.className = 'focus';
}
}
}
else
{
fields[k][j].className = 'blur';

fields[k][j].onblur = function()
{
this.className = 'blur';
}

fields[k][j].onfocus = function()
{
this.className = 'focus';
}
}
}
}

/*var fieldSets = forms[i].getElementsByTagName('fieldset');

for(var x = 0; x < fieldSets.length; x++)
{
if(fieldSets[x].style.width == undefined || fieldSets[x].style.width == "")
{
fieldSets[x].style.width = Math.round(totWidth / fields[0].length) + "px";
}
}*/
}
}

[catbert303]

It's because you have in an input field with the name length. Having this causes the length property of the node list to be "hidden" by the element - that is fields[0].length returns the item in the node list with the name length - not the length property of node list itself. Similarly if you tried fields[0].height you'd pick up the input element with the name height. I'm not sure if it's just implemented as an IE compatability thing or not but Opera does the same here.

If you change the name of the input to something else it should work.