getElementById() returns null although the element exists

Question

I am new to web (JSP, java-script etc). I am creating check-boxes dynamically and then applying java-script on them. The problem is that document.getElementById(..) always return null. I know this question has been asked many times, I tried those solutions but somehow they didn't worked for me, may be i am trying them wrong. Here's my code:

//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++;

What happens is that I can see the textbox id in the log and the first alert but document.getElementById(..) returns null. I tried putting the function after window.load but when i do that I didn't even get the 1st alert and get these errors on the console.

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

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

I know its not a good idea to mix java code in jsp pages, but this code is not written by me, and i just have to add to add some features in it, but yes at some point this must be fixed.

Can you please tell what I am doing wrong ?

Thanks.

What is the purpose of doing toString in "var chkd = document.getElementById(checkboxid.toString());"? — Flasz, Mar 17 '14 at 12:31
I need to know which "check-boxes" are unchecked as then later I had to make some changes in the database. — uyaseen, Mar 17 '14 at 12:36

giri-jeedigunta · Accepted Answer · 2014-03-18T11:47:57.773

1

Please remove .toString() in this statement var chkd = document.getElementById(checkboxid.toString()); and see if you are able to access the input tag. Alternatively you can try accessing the input tag using the tagname like this: document. getElementsByTagName('input')[0] which will give you access to the first input tag.

Edited:

For dynamically generated elements we can use addEventListener. All you need to add is a wrapper div tag. I've updated the jsFiddle: jsfiddle.net/giri_jeedigunta/NG3cP with a wrapper div tag please have a look at it. This works perfectly on all the dynamically added elements.

edited Mar 18 '14 at 11:47

answered Mar 17 '14 at 12:57

giri-jeedigunta

191
2
6

Thank you for your reply but neither of these solution works :/ – uyaseen Mar 18 '14 at 08:34
I've setup a similar function on jsFiddle: http://jsfiddle.net/giri_jeedigunta/NG3cP/ Please have a look at it. It is working fine with or without .toStrong(). Also I would request you to review the HTML and see if the desired ID's are getting populated and passed correctly. – giri-jeedigunta Mar 18 '14 at 09:13
Thank's alot :), It works if you have static elements (u know the number of elements before the page loads) but the problem is when you have dynamic elements (number of elements depend on some value retrieved from the database), now the javascript is not applied as expected. I always get null for 'chkd'. I have reviewed HTML and it seems correct, as I can see the 'checkboxid' in the log but document.getElementById(checkboxid) still returns null. – uyaseen Mar 18 '14 at 09:24
1

For dynamically generated elements we can use addEventListener. All you need to add is a wrapper div tag. I've updated the jsFiddle: http://jsfiddle.net/giri_jeedigunta/NG3cP/ with a wrapper div tag please have a look at it. This works perfectly on all the dynamically added elements. I've found another jsFiddle where the elements are getting added dynamically: http://jsfiddle.net/founddrama/ggMUn/ thru http://stackoverflow.com/questions/14258787/add-event-listener-on-elements-created-dynamically – giri-jeedigunta Mar 18 '14 at 09:52
Thank You very much, it worked, U really saved my day :). If you can please edit the answer so I can mark it as 'accepted'. – uyaseen Mar 18 '14 at 11:41

getElementById() returns null although the element exists

1 Answers1