document.getElementById("items_" + i) 为 null

Question

我有以下代码：

<script type="text/javascript">
for(var i=1; i<=3; i++) {
    document.getElementById("items_"+i).checked=true;
}
</script>                   

使用以下 HTML，

<input type="checkbox" id="items_1" name="myitems" value="1" />
<input type="checkbox" id="items_2" name="myitems" value="2" />
<input type="checkbox" id="items_3" name="myitems" value="3" />

我收到一条错误消息：

document.getElementById("items_" + i) is null.

如何解决此问题？

Answer 1

for 循环中的第一个索引将为零。

您是否有 id 为 items_0 的元素？

这可能就是导致您出现问题的原因。将 i 的初始值设置为 1

其次，您要确保 Javascript 代码在 DOM 加载后执行。

我建议您考虑使用 jQuery 因为这使得做这些事情变得更加简单。

Answer 2

好吧，您的代码看起来像是第一次迭代指向 i = 0，因此它试图找到 id 为“items_0”的输入标签。

这是一个 JSBin，显示代码正常工作：

http://jsbin.com/amonel/edit

Answer 3

var VanillaRunOnDomReady = function() {
    // code to execute after DOM has loaded  
    for (var i = 1; i <= 3; i++) {        
        document.getElementById("items_" + i).checked = true;
    }  
}

var alreadyrunflag = 0;
if (document.addEventListener) {    
    document.addEventListener("DOMContentLoaded", function(){
        alreadyrunflag=1;
        VanillaRunOnDomReady();
    }, false);
}
else if (document.all && !window.opera) {
    document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');

    var contentloadtag = document.getElementById("contentloadtag");

    contentloadtag.onreadystatechange=function(){
        if (this.readyState=="complete"){
            alreadyrunflag=1;
            VanillaRunOnDomReady();
        }
    }
}

window.onload = function(){
  setTimeout("if (!alreadyrunflag){VanillaRunOnDomReady}", 0);
}

Answer 4

我最终使用了：

$('#items_'+i).attr("checked", true);