Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

getElementById for dynamically created elements

Status
Not open for further replies.

dirku

Programmer
Mar 5, 2004
2
CH
Hi.

I am using JavaScript to dynamically create a table with a number of <TD> depending on the user who logged on (some want to see three values and others want to see five values...):


[blue]
Code:
<SCRIPT language="JavaScript1.2">
            document.write('<table class="clocks" border="1" bordercolor="#11fff1" width="100%" cellspacing="0" cellpadding="0" height="35">');
            document.write('<tr>');
             for(x=0; x<numOfTimezones; x++)
            {
                document.write('<td ID="Clock"' + x + ' valign="top" align="center" style="font-family: Verdana, Tahoma, Arial; font-size: 10px; padding-top: 2px;" >Clock' + x + '</td>');
            }//end for x
            document.write('<(tr>');
            document.write('</table>');
</SCRIPT>
[/blue]

To fill the variable number of <TD>s I am using some JavaScript functions. Of course, this should happen in a for-loop. In this loop I want to use a code like this to get the element and then put a value into the <TD>:


[blue]
Code:
for(x=0; x<numOfTimezones; x++)
{
    document.getElementById('Clock'+x).innerHTML =
              '<font color="' + ct[x].cl + '">' + ct[x].tz + ClockString(ct[x].ct) + '</font>' ;
            }//end for x
[/blue]

What can I do to access thes elements using JavaScript?

Thank you,

Dirk
 
Add an ID to the row holding them
Code:
<SCRIPT language="JavaScript1.2">
            document.write('<table class="clocks" border="1" bordercolor="#11fff1" width="100%" cellspacing="0" cellpadding="0" height="35">');
            document.write('<tr [b]ID="clockRow"[/b]>');
             for(x=0; x<numOfTimezones; x++)
            {
                document.write('<td ID="Clock"' + x + ' valign="top" align="center" style="font-family: Verdana, Tahoma, Arial; font-size: 10px; padding-top: 2px;" >Clock' + x + '</td>');
            }//end for x
            document.write('<(tr>');
            document.write('</table>');
</SCRIPT>

Now access them like this...

Code:
theRow = document.getElementbyId("clockRow")
for(x=0; x<theRow.childNodes.length; x++){
  alert(theRow.childNodes[x].id + " is the name of the clock")
}


Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Thank you, mwolf00.

I made two mistakes:
1. When I was writing the ID in the TD the variable is concatenated after the double quotes of Clock, so the ID for every TD created will still be Clock.
Example: Original: document.write('<td ID="Clock"' + x + ' valign="top".....
I changed it to document.write('<td ID="Clock' + x + '" valign="top"......
This gives me Ids of Clock0, Clock1, etc.

2. I have a lone parenthisis in this line: document.write('<(tr>'); So the TR wasn't closed.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top