Script working in FF but not IE

I am quite new to javascript and have created this function to show/hide rows of a html form on the page.

It works fine in Firefox but doesn't work in IE.

IE returns an error and it says there is an "object expected"

this is the code, can anybody suggest a place to look for the error.

Any help would be greatly appreciated. Thanks in advance

The show hide buttons are as follows:

<tr><td colspan="3" align="right"><img id="removeRow" src="images/spacer.gif" width="14px" height="14px" alt="more" onclick="javascript:addDelRow('del')" /> <img id="addRow" src="images/expand.jpg" width="14px" height="14px" alt="more" onclick="javascript:addDelRow('add')" /></td></tr>

The rows of the form are as follows:

</tr> <tr style="display:none;"> <th align="right"> <label for="seeker_category10" accesskey="10">Select job <u>c</u>ategory</label>:</th> <td align="left"><select name="seeker_category10" id="seeker_category10" size="1"><option value="" selected="selected"> select </option><option value="1">Accountancy</option><option value="2">Legal</option><option value="3">Clerical</option><option value="4">Construction</option><option value="5">Medical</option><option value="7">Consultancy</option><option value="8">Transport</option></select></td> <td></td> </tr>


and the javascript fundtion is:

function addDelRow(action){

var changeArea = document.getElementById("seeker_categories");
var allInputs = changeArea.getElementsByTagName("select");

//find number of input fields
var numRows = changeArea.getElementsByTagName('tr').length - 1;
var allRows = changeArea.getElementsByTagName('tr');
var addImg = document.getElementById('addRow');
var removeImg = document.getElementById('removeRow');
var numChanged = 0;
var n = 0; // number of rows
var d = 0; //

if (action == "add") {
for (i=1; i<=numRows; i++) {
if (allRows.item(i).style.display == 'none') {
//Current row is not displayed so display it if no rows have been changed yet
if (numChanged == 0) {
allRows.item(i).style.display = '';
numChanged++;
}
} else {
//increase number of displayed by 1
d++;
}
n++;
}

if (d >= n-1) {
addImg.src = 'images/spacer.gif';
}

//if more than one row displayed show remove item image
if (d >= 1) {
removeImg.src = 'images/contract.jpg';
}

} else if (action == "del") {

var nd = 0;

for (i=1; i<=numRows; i++) {
if (allRows.item(i).style.display == '') {
d++;
} else {
nd ++;
}

}

// delete row if its not the first
if ((d > 1) && (d <= numRows)) {
allRows.item(d-1).style.display = "none";
//reset input field
allInputs.item(d-1).options[0].selected = true;
}

// replace add image if less than maximum number of rows displayed
if (d-1 < numRows) {
addImg.src = 'images/expand.jpg';
}

if (d = 1) {
removeImg.src = 'images/spacer.gif';
}


}

//If no rows have been made visable they must all be visible
//so must make last one hidden


}

I'm not seeing any element having an id of seeker_categories (yet), which part of the markups is it placed?

Sorry, the whole form is enclosed within the div tag with id="seeker_categories"

I think IE needs the tbody tag to allow for dynamic rows.
<table>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>

I will try that when I get home but the whole form html is created in php with all but the first row set as style="display:none;".

All this script does is change the diplay property of each row from 'none' to '' or vice versa.

i,e if the function addDelRow('add') is called the next row will be unhidden and if addDelRow('del') is called the last row is set to syle="display:none;"

Not sure if this makes it any clearer.

Thanks for you help.

My mistake - that's what I get for a quick glance at the problem. I saw addRow and deleteRow and didn't read past that. Not sure if the tbody will fix that problem or no.

Hi BadBen,

A couple questions:

Does it not work in both IE 6 and IE 7? Or only tested on one version?

Does your generated HTML validate? If not IE will go into quirks mode, at which point it's behavior is a tad erratic.

Last, a suggestion:

Instead of trying to make the row display by setting display='', try setting a non-null value. Here is a list of possibilities with definitions: http://www.w3schools.com/css/pr_class_display.asp

Cheers,

MM