从外部jscript调用document.getElementById（）返回null

Question

I have one aspx page,which looks like this and calls the 123.js file located within the solution.

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="1.aspx.cs" Inherits="1"  ValidateRequest="false"%>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <script src="Scripts/123.js" type="text/javascript"></script>
    .
    .
    .
    .
    <tr>
     <td>Start DateTime</td>
     <td>
      <asp:TextBox ID="txtStartDateTime" runat="server"></asp:TextBox>                                
     </td>
     <td>                                    
       <a href="javascript:_fnSet('this', 'txtStartDateTime', 'close=true,instance=single')">                                         
       <img src="Styles/imagesCA3B3R54.jpg" alt="IMG" style="border-style: none" />                                         
       </a>
      </td>
    </tr>
</asp:Content>

This function fnSet() is located in 123.js

123.js starts with

function _fnSet(e, sInputID, sCustom) {
    var oInput = document.getElementById(sInputID);
}

sInputID is getting the value 'txtStartDateTime' as string but, This oInput returns null.

Why it is happening so..???

Answer 1

You're in a ContentPlaceHolder. By default, ASP.NET places an extra identifier in front of the Control's ID when rendered to the client. This is known as the ClientID. You can change how the ClientID is generated by changing the ClientIDMode. Try changing the ClientIDMode to Static.

<asp:TextBox ID="txtStartDateTime" ClientIDMode="Static" runat="server" />

If you're ever in doubt about what ID is being used on the client side, then view the page in your browser and view the HTML of the page that got generated.

In your web.config file, you can set ClientIdMode to be static by default.

<pages clientIDMode="static" />

Answer 2

The ID of txtStartDateTime is actually different. Have a look at the source code.

You can get the ClientID for example like this:

document.getElementById('<%# txtStartDateTime.ClientID %>')