javascript - 尽管元素存在，getElementById() 返回 null

Question

我是网络新手(JSP、java 脚本等)。我正在动态创建复选框，然后在其上应用 java 脚本。问题是 document.getElementById(..) 总是返回 null。我知道这个问题已经asked很多次，我尝试了这些解决方案，但不知何故它们对我不起作用，可能是我试错了。这是我的代码:

//window.onload = function handleUnusedDieFunctions(checkboxid) {
function handleUnusedDieFunctions(checkboxid) {

    console.log("checkbox id: " + checkboxid);
    var id = checkboxid;
    var chkd = document.getElementById(checkboxid.toString());
    console.log(chkd);
    alert("Just a formality");
    if(chkd.checked) {
       alert("checked");    
    }
    else {
        alert("unchecked");
    }
}

<!-- Some portion of jsp code -->

<div .....
out.println("<table>");
if((die.getFunctionList() != null) && (!die.getFunctionList().isEmpty())){
    functionListForDie = die.getFunctionList();
    ListIterator li11 = functionListForDie.listIterator();
    Function f1;
while (li11.hasNext()) {
f1 = (Function)li11.next();
System.out.println("IC: " + ic.getID() + " Die: " + die.getID() + ", Func: " +
                       f1.getID() + "\n");
out.println("<tr>");
    out.println("<td style='width:30px;'>");
if(unusedIcDieList.size() != 0)
{
    Boolean sameDie = false;
    Boolean sameFunc = false;
    for(IcDie icdie: unusedIcDieList)
    {
    if((icdie.getDieID() == die.getID()))
    {
        sameDie = true;
        System.out.println("icdie.getDieID() == " + icdie.getDieID() + 
                                   " , die.getID() == " + die.getID());
        ArrayList<Integer> unusedFunctionsList = icdie.getUnusedFunctions();
        for(Integer func: unusedFunctionsList)
        {
        System.out.println("Checking func = " + func + ", f1.getID() = " + f1.getID() );
        if(func.intValue() == f1.getID().intValue()) {
            System.out.println("func == " + func + " , f1.getID() == " + f1.getID());                                                                                                       
            sameFunc = true;
         }
    }

}
}
System.out.println("Same Die: " + sameDie.toString() + " , Same Func: " + sameFunc.toString() + "\n");
if(sameDie && sameFunc) {
    String id="test_" + String.valueOf(count);
    System.out.println("Should print unchecked checkbox for id: " + id);
%>
<input type="checkbox" name="unusedfunction" class="standard_checkbox" 
     style="margin: 0px 12px 0px 0px;"  id="'<%=id%>'"           click="handleUnusedDieFunctions('<%=id%>')" ><br>
   <%
}
else {
    String id="test_" + String.valueOf(count);
    System.out.println("Should print checked checkbox for id: " + id);
%>
<input type="checkbox" name="unusedfunction" class="standard_checkbox" style="margin: 0px 12px 0px 0px;" 
    id="'<%=id%>'" onclick="handleUnusedDieFunctions('<%=id%>')" checked="checked" ><br>
<%

}
 }
else
{
%>
<input type="checkbox" name="unusedfunction" class="standard_checkbox" style="margin: 0px 12px 0px 0px;" 
    id="'<%=id%>'" onclick="handleUnusedDieFunctions('<%=id%>')" checked="checked" ><br>
<%
}
count++;

我可以在日志和第一个警报中看到文本框 ID，但 document.getElementById(..) 返回 null。我试着把函数放在 window.load 之后但是当我这样做时，我什至没有收到第一个警报并在控制台上收到这些错误。

TypeError: checkboxid is undefined
var chkd = document.getElementById(checkboxid.toString());

ReferenceError: handleUnusedDieFunctions is not defined
handleUnusedDieFunctions('test_1')

我知道在 jsp 页面中混合 java 代码不是一个好主意，但这段代码不是我写的，我只需要添加以在其中添加一些功能，但是是的，在某些时候这必须被修复。

你能告诉我哪里做错了吗？

谢谢。

Answer 1

请删除此语句中的 .toString() var chkd = document.getElementById(checkboxid.toString()); 并查看您是否能够访问输入标签。或者，您可以尝试使用如下标记名访问输入标记:document。 getElementsByTagName('input')[0] 这将使您能够访问第一个输入标签。

编辑:

对于动态生成的元素，我们可以使用 addEventListener。您需要添加的只是包装器 div 标签。我已经用包装器 div 标签更新了 jsFiddle:jsfiddle.net/giri_jeedigunta/NG3cP 请看一看。这适用于所有动态添加的元素。