Get element by ID in JavaScript

Question

I use JavaScript and this error appears for me during execution:

Microsoft JScript runtime error: 'document.getElementById(...)' is null or not an object

this my code:

<asp:Content ID="content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script language="javascript" type="text/javascript">
    function ConfirmTransfere() {
        if (confirm("Syatem not allow negative inventory, would you like to continue ?") == true) {
            document.getElementById("btnAlelrt").click();

        }       
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="uxContainer" runat="server">
    <ContentTemplate>
 <table> 
<tr>
        <td>
        <asp:Button ID="uxTransfer" runat="server" Text="Transfer" OnClick="uxTransfer_Click" /> 
        <asp:Button ID="btnAlelrt" runat="server" Text="GetDetails" OnClick="btnAlelrt_Click" />       
        </td>
        </tr>
</table>
    </ContentTemplate>
<Triggers>
    <asp:PostBackTrigger ControlID="uxTransfer" />    
    </Triggers>
    </asp:UpdatePanel>

 </asp:Content>

Answer 1

This:

function ConfirmTransfere() {
        if (confirm("Syatem not allow negative inventory, would you like to continue ?") == true) {
            document.getElementById("btnAlelrt").click();

        }

needs to be this:

function ConfirmTransfere() {
        if (confirm("Syatem not allow negative inventory, would you like to continue ?") == true) {
            document.getElementById('<%=btnAlert.ClientID%>').click();

        }

The problem is that your button is an ASP.Net control and will generate it's own client id, which will be different from the ID you specified. putting in the code <%=btnAlert.ClientID%> Will post the generated one out to the browser.

Answer 2

If you look at the rendered page the control called btnAlelrt no longer has that name...

If you add "<%=" you are then able to access the C# name of a control, and it should work.

Answer 3

The ID you give the asp:Button is the ID that is used on the server by ASP.Net. It is not the ID that is used by the client script.

You should use:

document.getElementById("<%= btnAlelrt.ClientID %>").click();

Answer 4

If you view source on your generated page you will likely find that the button no longer has the ID "btnAlelrt". It might have something like "ctl001_btnAlert", or some other generated uniqueness identifier.

This is why your javascript isn't finding it.

You'll either need to search by tag, and check the IDs to see if they end in btnAlelrt, or you'll have to place a DIV or SPAN around it with an ID that won't be changed (i.e. doesn't have runat="server"). You can then find that element by its ID, and then get the button inside of it.

If you can, you can use the <%=btnAlelrt.ClientID%> syntax to insert the proper ID in your javascript.

(SIDENOTE:was this supposed to be btnAlert?)

Answer 5

I can't find a code sample to post for you at this moment, but I can explain the problem your having.

ASP.NET doesn't use the ID you give an object /element / button when it writes it to the page, instead it give the object a client ID.

If you do Msgbox(btnAlelrt.clientID) in your code then you will see the object name your javascript should use.

It is better to have the .NET code write out these values, in javascript, to the page, as they are not a constant.

Hope this helps.

James