salesforce - How to refer html element id specified in visualforce and pass onto javascript function? -

i have apex tag generate input text field.

<apex:page id="my_page">     <apex:inputtext id="foo" id="c_txt"></apex:inputtext> </apex:page> 

when clicks field, want execute javascript.

but when check html source, apex tag becomes input tag has (i think) dynamically generated part.

   <input type="text" size="50" value="tue nov 16 00:00:00 gmt 2010"  name="j_id0:j_id3:j_id4:c_txt" id="j_id0:j_id3:j_id4:c_txt"> 

as can see id has junk part :(

id="j_id0:j_id3:j_id4:c_txt" 

in javascript i'm trying getelementbyid('c_txt') not work of course. how deal this???

update

seems can not working...

<apex:includescript value="{!urlfor($resource.datepickerjs)}"></apex:includescript>  <apex:inputtext id="foo" id="c_txt" onclick="javascript:displaydatepicker()" /> 

datepickerjs

var elem = getelementbyid('c_txt'); alert(elem); 

the alert shows 'null' must wrong.

even alert returns null...

var targetdatefield = document.getelementbyid('{!$component.my_page:c_txt}'); alert(targetdatefield); 

you can use $component notation in javascript, use so:

var e = document.getelementbyid("{!$component.componentid}"); 

one thing wary of though, if element contained within several levels of visualforce tags have ids:

<apex:pageblock id="theblock">     <apex:pageblocksection id="theblocksection">         <apex:commandlink action="{!someaction}" value="link!" id="thelink"/>  // snip  // in javascript reference component using: document.getelementbyid("{!$component.theblock.thesection.thelink}");