我在这里开始了一个帖子document.getElementById not working,但看起来即使提出的建议都有效,我仍然有问题。
我有几个复选框。当我在这里查看页面源时。 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>
答案 0 :(得分:10)
您可能在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]
,这意味着它工作并找到了两个节点。不知道该告诉你什么。
答案 1 :(得分:7)
我知道这篇文章已经过时了,但我在寻找类似问题的帮助时找到了它:.getElementById
对我来说并不适用于输入type=text
。适用于精选控件,对我来说在我的系统中的其他页面输入type=text
时效果很好,但是我把头发拉了几个小时试图让它在这个愚蠢的页面上工作......
从window_onload
调来,不是dom问题,等等等等。
我仍然不知道为什么它不起作用,但我能够成功地使用.getElementsByName
作为替代品。可能不太理想,但它肯定会让你再次前进。希望这会有所帮助。
答案 2 :(得分:1)
我同意另一个答案,你可能在加载之前尝试访问dom。试试这个
window.onload = function(){alert(document.getElementById('chk1'));}
了解ya如何运作
答案 3 :(得分:0)
答案 4 :(得分:0)
您是否使用复选框的.checked属性来查看是否已选中?看看这个例子。它解释了如何评估复选框的检查状态。
答案 5 :(得分:0)
您是否使用chk0和chk2作为页面上任何其他html元素的元素ID。
答案 6 :(得分:0)
使用Jquery,试试这个:
<script type="text/javascript">
$().ready(function() {
$('#chk1');
});
</script>
一旦DOM准备好被操作它就会执行,这应该可以解决你的问题。
答案 7 :(得分:0)
此外,如果您在Facebook应用程序上运行此操作并使用前缀'f',如f0或f_10,那么它也不起作用,我发现的错误错误,我认为我会分享,因为这是我用Google搜索的