document.getElementById(仍然)不起作用

Question

我在这里开始了一个线程document.getElementById不工作,但看起来即使所提出的建议都是有效的我仍然有问题.

我有几个复选框.当我在这里查看页面源时.document.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>

Answer 1

您可能在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>

要么

<script type="text/javascript">
  // Force execution to wait until window is done i.e, DOM is ready
  window.onload = function()
  {
    document.getElementById('chk1');
  }
</script>

<input id="chk1">

编辑

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

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

并在IE7中打开它.产生的警报[object],[object]意味着它工作并找到了两个节点.不知道该告诉你什么.

Answer 2

我知道这篇文章很老了,但我在寻找类似问题的帮助时找到了它:.getElementById输入后没有为我工作type=text.适用于精选控件的工作正常,对我来说可以type=text在我的系统中的其他页面输入正常工作,但是我把头发拉了几个小时试图让它在这个愚蠢的页面上工作...来自window_onload,而不是dom问题, 等等等等等等.

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