Find out client-side ID of HTML element created by .NET?

How do I write some client-side script to access a HTML element when .NET has generated the element’s ID at runtime?

At present I have this in my ASPX:

<asp:Content ContentPlaceHolderID="middle_area" runat="server">
    <asp:Image ID="ImageBarChart" runat="server" />
</asp:Content>

<script>
var oImage = document.getElementById('ctl00_middle_area_ImageBarChart')
</script>

It it working at present, but I doubt it is reliable!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

ClientID: Documentation

You would then do <%= ImageBarChart.ClientID %> to put it in your javascript

Method 2

You can write <%= ImageBarChart.ClientID %>.

Method 3

Try this:

<asp:Content ContentPlaceHolderID="middle_area" runat="server">
    <asp:Image ID="ImageBarChart" runat="server" />
</asp:Content>

<script>
var oImage = document.getElementById('<%= ImageBarChart.ClientID %>')
</script>

Method 4

You can use the ASP.NET elements Client Id like so:

<%= ImageBarChart.ClientID %>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0