Dynamic getElementById()

[neomaximus2k]

Hey guys, I know i posted this in another post but thought i'd explain it in more depth in its own topic.

Basicly I have the following HTML


<table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td align="center" bgcolor="#ffffee"><strong>Row Title</strong> <br>(Appears in the left side of the table, HTML accepted) </td><td align="center" bgcolor="#ffffee"><strong>Row Description</strong> <br>(Appears in the right side of the table, HTML accepted) </td></tr><tr><td align="center" valign="top"><textarea name="rowtitle_0" style="width: 98%;"></textarea></td><td align="center" valign="top"><textarea name="rowdesc_0" style="width: 98%;"></textarea></td></tr>

<tr><td align="center" valign="top"><textarea name="rowtitle_1" style="width: 98%;"></textarea></td><td align="center" valign="top"><textarea name="rowdesc_1" style="width: 98%;"></textarea></td></tr>
<tr><td colspan="2" align="right"><input value="2" name="numberofrows" id="numberofrows" type="hidden"><input name="generate" value="Generate HTML" onclick="generateproddeschtml()" type="button">&nbsp;<input name="preview" value="Preview HTML" onclick="alert(document.edit.rowtitle[]);" type="button"></td></tr></tbody></table>

That is generated by another script in PHP now what i need to do is this, i need to loop through the number of rows and create some HTML code based upon the information in the boxs... this is what I came up with


function generateproddeschtml(){
<!-- ok generate the product description and place it into the description field -->
var NUMBEROF = document.getElementById('numberofrows').value;
THEFIELDS = Array();
for (var i = 0; i < NUMBEROF; i++){
THEFIELDS[i] = 'rowtitle_'+i;
alert(i);
}
var HTML = '<table width="460" cellpadding="0" cellspacing="0">';
for (var i_temp = 0; i_temp < THEFIELDS.length; i_teno++){
HTML = HTML + '<tr><td width="17"><img src="img/doughnut_red.gif" width="15" height="15" /></td><td height="21" width="200">'+document.getElementById(THEFIELDS[i_temp]).value+'</td><td width="250">'+document.getElementById('rowdesc_'+i)+'</td></tr>';
}

HTML = HTML + '</table>'
document.getElementById("description").value = HTML;

}

What happens when i call this script? well I get the following error message....


Error: document.getElementById(THEFIELDS[i_temp]) has no properties
Line: 84

Its doing my head in now and I have untill tonight to get it done any suggestions?

[Twey]

If you have a table with an ID:
<table id="tbl">it's a simple matter to get all cells in that table:
var e = document.getElementById("tbl").getElementsByTagName("td");

[neomaximus2k]

If you have a table with an ID:
<table id="tbl">it's a simple matter to get all cells in that table:
var e = document.getElementById("tbl").getElementsByTagName("td");

However this will not bring back the values of the text fields

[Twey]

You can use innerHTML or getElementById() on the cells to obtain their contents or the contents of another element inside them.

[neomaximus2k]

You can use innerHTML or getElementById() on the cells to obtain their contents or the contents of another element inside them.

I am already using innerHTML for something else.

I have uploaded a cut down version of the file to my site so you can all see what i am doing

http://www.paramiliar.com/testjs.html

It is still saying the getElementById() is incorrect but the fields excist and they have data