Javascript document.getElementById（仍然）不工作

我在这里开始了一个帖子，但看起来即使提出的建议是有效的，我仍然有一个问题

我有几个复选框。当我在这里查看页面源代码时，有。getElementById'chk1'是唯一一个不为null的文档。怎么可能呢

<input id="chk0" value="JobStages###StageCode~JobCode###DRAW~1005" onclick="addRemoveRow(this.value,this.checked)" style="border-width:0px;padding:1px;margin:0px;height:14px;"  type="checkbox" />

<input id="chk1" value="JobStages###StageCode~JobCode###FEAS~1005" onclick="addRemoveRow(this.value,this.checked)" style="border-width:0px;padding:1px;margin:0px;height:14px;"  type="checkbox" />

<input id="chk2" value="JobStages###StageCode~JobCode###N/C~1005" onclick="addRemoveRow(this.value,this.checked)" style="border-width:0px;padding:1px;margin:0px;height:14px;"  type="checkbox" />

编辑：几乎完整的代码

<tr id='rw1' onMouseOver='setHover(this,event);' class='DRAW~1005      '
    onClick='setClick(this,event);'>
    <td id='RowId_0' width=0 style='display: none'>1</td>

    <td id='PrimaryKey_0' width=0 style='display: none'>DRAW~1005</td>
    <td id='StageCode_0' width=0 style='display: none'>DRAW</td>
    <td id='Allocated_0' nowrap
        style='overflow: hidden; height: 16px; width: 136px; overflow: hidden; text-align: center; padding-left: 5px;'
        class='col1'><input id="chk0"
        value="JobStages###StageCode~JobCode###DRAW~1005"
        onclick="addRemoveRow(this.value,this.checked)"
        style="border-width: 0px; padding: 1px; margin: 0px; height: 14px;"
        type="checkbox" /></td>
    <td id='StageCode_0' nowrap
        style='overflow: hidden; height: 16px; width: 136px; overflow: hidden; text-align: left; padding-left: 5px;'
        class='col2'></td>
    <td id='StageDescription_0' nowrap
        style='overflow: hidden; height: 16px; width: 123px; overflow: hidden; text-align: left; padding-left: 5px;'
        class='col3'
        onclick="showTextEditor(event,'JobStages','StageDescription','StageCode~JobCode','DRAW~1005      ');">
    </td>
    <td id='StartDate_0' nowrap
        style='overflow: hidden; height: 16px; width: 171px; overflow: hidden; text-align: left; padding-left: 5px;'
        class='col4'
        onclick="showCalendar(event,'JobStages','StartDate','StageCode~JobCode','DRAW~1005      ');">
    </td>
    <td id='EndDate_0' nowrap
        style='overflow: hidden; height: 16px; width: 112px; overflow: hidden; text-align: left; padding-left: 5px;'
        class='col5'
        onclick="showCalendar(event,'JobStages','EndDate','StageCode~JobCode','DRAW~1005      ');">
    </td>
</tr>

<tr id='rw2' onMouseOver='setHover(this,event);' class='FEAS~1005      '
    onClick='setClick(this,event);'>
    <td id='RowId_1' width=0 style='display: none'>2</td>

    <td id='PrimaryKey_1' width=0 style='display: none'>FEAS~1005</td>
    <td id='StageCode_1' width=0 style='display: none'>FEAS</td>
    <td id='Allocated_1' nowrap
        style='overflow: hidden; height: 16px; width: 136px; overflow: hidden; text-align: center; padding-left: 5px;'
        class='col1'><input id="chk1"
        value="JobStages###StageCode~JobCode###FEAS~1005"
        onclick="addRemoveRow(this.value,this.checked)"
        style="border-width: 0px; padding: 1px; margin: 0px; height: 14px;"
        type="checkbox" /></td>
    <td id='StageCode_1' nowrap
        style='overflow: hidden; height: 16px; width: 136px; overflow: hidden; text-align: left; padding-left: 5px;'
        class='col2'></td>
    <td id='StageDescription_1' nowrap
        style='overflow: hidden; height: 16px; width: 123px; overflow: hidden; text-align: left; padding-left: 5px;'
        class='col3'
        onclick="showTextEditor(event,'JobStages','StageDescription','StageCode~JobCode','FEAS~1005      ');">
    </td>
    <td id='StartDate_1' nowrap
        style='overflow: hidden; height: 16px; width: 171px; overflow: hidden; text-align: left; padding-left: 5px;'
        class='col4'
        onclick="showCalendar(event,'JobStages','StartDate','StageCode~JobCode','FEAS~1005      ');">
    </td>
    <td id='EndDate_1' nowrap
        style='overflow: hidden; height: 16px; width: 112px; overflow: hidden; text-align: left; padding-left: 5px;'
        class='col5'
        onclick="showCalendar(event,'JobStages','EndDate','StageCode~JobCode','FEAS~1005      ');">
    </td>
</tr>

---

这只是一种预感，但可能ie8不喜欢输入没有名称的情况，特别是因为它们是复选框

您可能在DOM节点可用之前执行javascript

这行不通

<script type="text/javascript">
  // trying to retrieve #chk1 before it exists in the DOM!
  document.getElementById('chk1');
</script>

<input id="chk1">

然而，这两种方法中的任何一种都会

<input id="chk1">

<script type="text/javascript">
  // #chk1 exists in DOM, this works
  document.getElementById('chk1');
</script>

或

编辑 我从上面复制了你的整个HTML块，并将其添加到它的末尾

<script type="text/javascript">
alert([ 
    document.getElementById('chk0')
  , document.getElementById('chk1')
]);
</script>

---

并在IE7中打开了它。警报生成了[object]、[object]，这意味着它工作并找到了两个节点。不确定要告诉您什么。

是否使用复选框的.checked属性查看是否选中了该复选框？看看这个例子。它解释了如何评估复选框的检查状态

---

您是否使用chk0和chk2作为页面上任何其他html元素的元素id。

我同意另一个答案，您可能试图在加载dom之前访问它。试试这个

window.onload = function(){alert(document.getElementById('chk1'));}

请参见如何使用Jquery为ya工作，尝试以下操作：

<script type="text/javascript">
  $().ready(function() {
    $('#chk1');
  });
</script>

---

一旦DOM准备好被操作，它就会执行，这应该可以解决你的问题。

另外，如果你在facebook应用程序上运行它，并且使用前缀“f”如f0或f_10，那么它也不起作用，我发现了一个wierd错误，我想我会与大家分享，因为这是我在谷歌上搜索的内容。

我知道这篇文章很旧，但我是在寻找关于类似问题的帮助时发现它的：。getElementById不适用于输入类型为text的我。对于选择控件和系统中其他页面上的输入类型=文本都很好，但我花了几个小时的时间试图让它在这个愚蠢的页面上工作。。。 从window_onload调用，不是dom问题，诸如此类

---

我仍然不知道为什么它不起作用，但我成功地使用了.getElementsByName作为替代品。可能不太理想，但它肯定会让你再次前进。希望这能有所帮助。

你能发布你的完整代码吗？如果他正在测试的浏览器仍然使用它，那么它被弃用并不重要。例如，IE6可能会遇到问题。仅对元素a、小程序、表单、框架、iframe、img和map不推荐使用名称。不推荐与输入标记一起使用。@Jason你在说什么？表单元素的名称并没有被弃用。@Jason:IE已经坏了很多，更少了。试着不要在链接中添加href，看看IE6会如何抱怨。这是一个有效的建议。Folk。我无法访问元素，因此无法访问选中的属性。我认为不可能。正如我在示例中所述，我可以访问中间复选框chk1，因此如果您所说的是真的，我将无法访问其中任何一个复选框。这对我来说是个奇怪的问题，我知道彼得我自己也试过。从表面上看，一切都很好。我想我的问题应该是这样的，什么会导致document.getElementById失败，例如id etc中的无效字符可能还有一个原因。我看到了您的完整代码。可能是由于特殊字符，包含chk0/chk2的dom元素可能根本无法解析。您可以不执行document.getElementById。而是运行表单中包含复选框的所有元素，查看是否列出了chk0和chk2。chk0和chk2不是任何其他元素的元素ID。除这些复选框外，没有其他元素以chk开头。拉贾特，哪些特殊角色？我没有太多地使用jquery，但我确实引用了它。我得到的对象不支持此属性。语法正确吗？我刚刚测试过，是的，它是正确的。确保正确引用jquery我正在尝试访问js函数中的元素，该函数是按钮单击事件的处理程序。我只在页面完全加载后按此键。在按钮onclick事件之前，不会调用任何其他内容…而且，由于getElementsByName返回和数组，您需要引用索引来获取和设置值，例如：var txt=document.getElementsByNametextbox_name[0]。value+1分享你的解决方案：这里有同样的问题，onload没有问题，甚至在页面加载5分钟后在Googledev工具中都不起作用。。切换到getElementsByName，效果很好！谢谢

<script type="text/javascript">
  $().ready(function() {
    $('#chk1');
  });
</script>