控件 ID 正确呈现但仍然出现 javascript 错误

Question

错误：

Microsoft JScript runtime error: 'ctl00_ContentPlaceHolder1_txtAdmDate' is undefined

代码：

<input ID="txtAdmDate" runat="server" readonly="readonly" type="text" 
                                        tabindex="23" clientidmode="AutoID" />
    <a href="#" onclick="showCalendarControl(ctl00_ContentPlaceHolder1_txtAdmDate)">
                                    <img border="0" src="images/SmallCalendar.jpg" 
                                        style="width: 20px; height: 20px" /></a>                             

Javascript：

function showCalendarControl(textField) {
      calendarControl.show(textField);
    }

html 渲染来源：

<input name="ctl00$ContentPlaceHolder1$txtAdmDate" type="text" id="ctl00_ContentPlaceHolder1_txtAdmDate" readonly="readonly" tabindex="23" />
       <a href="#" onclick="showCalendarControl(ctl00_ContentPlaceHolder1_txtAdmDate)">
        <img border="0" src="images/SmallCalendar.jpg" 
                                        style="width: 20px; height: 20px" /></a>

问题：

虽然 html 呈现的源代码显示控件的 id 是 ctl00_ContentPlaceHolder1_txtAdmDate 并且相同的传递给了 javascript 函数，但生成了错误。我尝试将 clientidmode 设置为 Autoid 和 static，但没有任何效果。需要你们的帮助来解决这个问题。

Answer 1

首先，您看起来像是在母版页或用户控件中（因此名称重整），在这种情况下，您不应假设名称将如何通过硬编码来重整。如果您使用不同的母版页或将用户控件移动到另一个页面，则损坏的名称可能不同。要解决此问题，请改用 ClientID 属性。

此外，您不能直接通过名称引用控件来让 Javascript 找到它，因为控件不是全局变量。相反，您可以使用 document.getElementById 来获取控件的句柄。

<a href="#" onclick="showCalendarControl(document.getElementById('<%=txtAdmDate.ClientID%>')">

Answer 2

当你这样说时：

showCalendarControl(ctl00_ContentPlaceHolder1_txtAdmDate)

您假设 ctl00_ContentPlaceHolder1_txtAdmDate 是一个变量，但它不是一个变量，它只是一个 DOM id 属性。你可以这样说：

showCalendarControl(document.getElementById('ctl00_ContentPlaceHolder1_txtAdmDate'))

在函数调用中将其转换为对象，或者您可以将 ID 发送到 showCalendarControl 并让它将 ID 转换为对象：

onclick="showCalendarControl('ctl00_ContentPlaceHolder1_txtAdmDate')"

然后调整showCalendarControl:

function showCalendarControl(textFieldId) {
    var textField = document.getElementById(textFieldId);
    calendarControl.show(textField);
}