retain only the client control id
<p>I have a situation where I have a number of objects that are dynamically created in code behind. Each object has a number of hidden fields, and an image button. </p>

<p>When the image button is rolled over I have a js file that should get the relevant fields for that object and do some stuff.</p>

<p>The trouble I have is that when I roll over the button I get a null refernce as the getEmelementById doesn't nkow which object I'm refereing to.</p>

<p>Here is the ascx page:</p>

<pre><code>    &lt;div style="position:relative;float:right;" visible="true"&gt;
    &lt;asp:ImageButton ID="iconNarrative" visible="true" ImageUrl="/_layouts/images/osys/NarrativeIcon.gif" runat="server" Style="position:absolute; top:-28px; left:-25px; display:block;" onmouseout="hideNarrative()" onmouseover="showNarrative(this, document.getElementById(id))" /&gt;
    &lt;asp:HiddenField ID="hfNarrative" runat="server" Visible="true" /&gt;        
&lt;/div&gt;    
</code></pre>

<p>Here is how it looks when rendered. there are 2 in this instance:</p>


        
                
        
        
          

<p>and</p>

<pre><code>        &lt;div style="position:relative;float:right;" visible="true"&gt;
    &lt;input type="image" name="ctl00$m$g_90cae966_b430_4d11_8992_816553676250$ctl00$iconNarrative" id="ctl00_m_g_90cae966_b430_4d11_8992_816553676250_ctl00_iconNarrative" onmouseout="hideNarrative()" onmouseover="showNarrative(this, document.getElementById(id))" src="/_layouts/images/osys/NarrativeIcon.gif" style="border-width:0px;position:absolute; top:-28px; left:-25px; display:block;" /&gt;
    &lt;input type="hidden" name="ctl00$m$g_90cae966_b430_4d11_8992_816553676250$ctl00$hfNarrative" id="ctl00_m_g_90cae966_b430_4d11_8992_816553676250_ctl00_hfNarrative" /&gt;        
    &lt;input type="hidden" name="ctl00$m$g_90cae966_b430_4d11_8992_816553676250$ctl00$hfNarrativeDate" id="ctl00_m_g_90cae966_b430_4d11_8992_816553676250_ctl00_hfNarrativeDate" /&gt;
    &lt;input type="hidden" name="ctl00$m$g_90cae966_b430_4d11_8992_816553676250$ctl00$hfNarrativeBy" id="ctl00_m_g_90cae966_b430_4d11_8992_816553676250_ctl00_hfNarrativeBy" /&gt;
&lt;/div&gt;  
</code></pre>

<p>here is my javascript</p>

<pre><code>var narrativeContainer = document.getElementById('narrative_container');
var narrative = document.getElementById('&lt;%=hfNarrative.ClientID%&gt;');
var narrativeBy = document.getElementById('&lt;%=hfNarrativeBy.ClientID%&gt;');
var narrativeDate = document.getElementById('&lt;%=hfNarrativeDate.ClientID%&gt;');  

narrative = document.getElementById('&lt;%=hfNarrative.ClientID%&gt;');
</code></pre>

<p>So how do I now which set of hidden fields where called?
The only thing I could think to do was get the Id and apend this to the various fields, then use the getElementById?</p>
