Javascript ASP.NET控件的GetElementById不断返回'；空'；

我花了一个多小时试图解决这个问题，真是太绝望了。我正在尝试访问从ASP.NET控件创建的DOM中的节点。我使用的是完全相同的id，我可以在页面呈现后查看HTML源代码时看到它们匹配。下面是我的[根据建议修改，但仍不起作用]代码：

ASP.NET头文件

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript">
    $(document).ready(
        var el = document.getElementById('<%= txtBox.ClientID %>');
        el.onchange = alert('test!!');
    )
    </script>
</asp:Content>

这么说。ready显然不能正常工作。啊

$(document).ready(function() {
    document.getElementById('<%= txtBox.ClientID %>').onchange = alert('WORKING!');
})

$（文档）.ready（函数（）{
document.getElementById（“”）.onchange=alert（'WORKING！'）；
})
假设呈现的标记确实按该顺序出现，问题是在JavaScript试图定位该元素时，该元素还不存在

要么将JS移动到元素下方（最好是在主体的末端），要么用类似的方式将其包裹起来

更新：

为了响应您的编辑，您几乎做到了，但是（正如其他人所提到的）您需要为onchange事件分配一个函数，而不是
alert（）
的返回结果。大概是这样的：

$(document).ready(function() {
  // Might as well use jQuery to attach the event since you're already using
  //  it for the document ready event.
  $('#<%= txtBox.ClientID %>').change(function() {
    alert('Working!');
  });
});

$（文档）.ready（函数（）{
//最好使用jQuery来附加事件，因为您已经在使用
//它用于文档就绪事件。
$（'#'）。更改（函数（）{
警惕（‘工作’）；
});
});

通过写入
onchange=alert（'Working'）
，您要求JavaScript将
alert（）
方法的结果分配给onchange属性。这就是为什么它会在页面加载时立即执行它，但实际上从来没有响应onchange事件（因为您没有为该函数分配运行onchange的函数）。
选择jQuery

那你可以

$(function()
{
    var el = document.getElementById('<%= txtBox.ClientID %>');
    el.onclick() { alert('test!!'); }
});

$（函数（）
{
var el=document.getElementById（“”）；
el.onclick（）{alert（'test！！'）；}
});
其他答案已经指出了错误（试图在DOM节点出现在文档中之前访问它们），我只想指出其他解决方案

简易法
在HTML中要访问的元素的结束标记下方添加脚本元素。以最简单的形式，将其放在结束body标记之前。这种策略还可以使页面显示得更快，因为浏览器不会暂停加载HTML脚本。总的加载时间是相同的，但是，脚本仍然必须被加载并执行，只是这个顺序让用户觉得它很快

使用window.onload或
每个浏览器都支持此方法，但在加载所有内容后会触发此方法，因此页面可能会在短时间内处于非活动状态（如果加载已完成，则可能会长时间处于非活动状态）。但它非常健壮

使用DOM就绪函数
其他人建议使用jQuery，但您可能不希望只为DOM就绪函数使用4000行和90kb的代码。jQuery非常复杂，很难从库中删除。然而，大卫马克的是非常模块化的，非常容易提取你想要的位。代码质量也很好，至少与任何其他库相当

下面是从MyLibrary中提取的DOM就绪函数的示例：

var API = API || {};

(function(global) {

  var doc = (typeof global.document == 'object')? global.document : null;

  var attachDocumentReadyListener, bReady, documentReady,
      documentReadyListener, readyListeners = [];
  var canAddDocumentReadyListener, canAddWindowLoadListener,
      canAttachWindowLoadListener;

  if (doc) {
    canAddDocumentReadyListener = !!doc.addEventListener;
    canAddWindowLoadListener    = !!global.addEventListener;
    canAttachWindowLoadListener = !!global.attachEvent;

      bReady = false;
      documentReady = function() { return bReady; };
      documentReadyListener = function(e) {
        if (!bReady) {
          bReady = true;
          var i = readyListeners.length;
          var m = i - 1;
          // NOTE: e may be undefined (not always called by event handler)
          while (i--) { readyListeners[m - i](e); }
        }
      };

      attachDocumentReadyListener = function(fn, docNode) {
        docNode = docNode || global.document;
        if (docNode == global.document) {
          if (!readyListeners.length) {
            if (canAddDocumentReadyListener) {
              docNode.addEventListener('DOMContentLoaded',
                                        documentReadyListener, false);
            }
            if (canAddWindowLoadListener) {
              global.addEventListener('load', documentReadyListener, false);
            }
            else if (canAttachWindowLoadListener) {
              global.attachEvent('onload', documentReadyListener);
            } else {
              var oldOnLoad = global.onload;              
              global.onload = function(e) { 
                  if (oldOnLoad) { 
                    oldOnLoad(e); 
                  }
                  documentReadyListener();
              };
            }
          }
          readyListeners[readyListeners.length] = fn;
          return true;
        }
        // NOTE: no special handling for other documents
        // It might be useful to add additional queues for frames/objects
        else {
          if (canAddDocumentReadyListener) {
            docNode.addEventListener('DOMContentLoaded', fn, false);
            return true;
          }
          return false;
        }
      };

      API.documentReady = documentReady;
      API.documentReadyListener = documentReadyListener;
      API.attachDocumentReadyListener = attachDocumentReadyListener;

  }
}(this));

将其用于您的案例：

function someFn() {
  var el = document.getElementById('MainContent_txtBox');
  el.onclick = function() { alert('test!!');
}

API.attachDocumentReadyListener(someFn);

或者可以提供匿名函数：

API.attachDocumentReadyListener(function(){
  var el = document.getElementById('MainContent_txtBox');
  el.onclick = function() { alert('test!!');
};

非常简单的DOM就绪函数可以在10行代码中完成，如果您只需要针对特定情况编写一行代码，但当然它们的健壮性较差，并且不具有可重用性。
我将尝试一下，然后再与您联系。非常感谢您的快速响应：）好的，我通过将脚本移动到底部（现在就可以了），但是，根据Chrome Inspect元素，HTMLTextArea DOM对象显然没有onclick事件。我希望这段代码触发的事件是当文本框的内容发生更改时。@Chiramisu-textareas肯定有一个单击事件，但您的语法不正确。见我的评论附在你的原始问题上。如果您想知道内容何时更改，您可能希望使用
onchange
而不是
onclick
（注意，onchange不会在键入时触发，只有在元素失去焦点时才会触发；您可以捕获
onkeyup
或
onkeypress
，以便在发生更改时查找更改）大卫·沃德：多亏了你，我终于拿到了。我很感激你陪我度过难关。我开始对jQuery的工作原理有了更多的了解。有趣的语法。很容易在所有的（）和{}中迷失，哈哈。干杯；）1） suggest的OP使用了一个相当大的javascript库，该库具有非常强大的选择器和事件处理支持；2）使用一个单独的功能来包装可以从JQuery中获益的普通javascript代码：）它必须在函数中吗？这是我无论如何都要执行的代码。@tomfumb-谁会这么做？@Chiramisu函数wrap只意味着在文档准备好之前不会执行代码-因此所有元素都保证存在于DOM中（尽管如果它们包含图像或其他外部内容，则不必填充它们）。这与将代码放入文档正文的onload事件处理程序不同，因为只有在检索到所有外部内容后，才会执行此操作。。。但仍然无法确定要使用哪个事件。我很确定我现在做得对，我想。令人沮丧的是：（除了文档准备问题外，
onclick
的语法不正确。您需要指定
onclick
指向函数，而不是像调用函数一样调用它。因此，请尝试将其更改为类似于
el.onclick=function（）{alert（“test”）；}；或者你可以在页面的其他地方定义
function myFunction（）{…}
.Ack！！我今天很累了。我明天再拿起这个，然后确定答案。谢谢大家；）+1的MyLibrary链接。我不知道那个图书馆，但它看起来不错。它是一个很好的资源，一个
function someFn() {
  var el = document.getElementById('MainContent_txtBox');
  el.onclick = function() { alert('test!!');
}

API.attachDocumentReadyListener(someFn);

API.attachDocumentReadyListener(function(){
  var el = document.getElementById('MainContent_txtBox');
  el.onclick = function() { alert('test!!');
};