Tuesday, November 27, 2018

javascript - getElementById() returns null although the element exists




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");
    }
}




out.println("");
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("");
    out.println("
");
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 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);

%>
     style="margin: 0px 12px 0px 0px;"  id="'<%=id%>'"           click="handleUnusedDieFunctions('<%=id%>')" >
   <%
}
else {
    String id="test_" + String.valueOf(count);
    System.out.println("Should print checked checkbox for id: " + id);
%>

    id="'<%=id%>'" onclick="handleUnusedDieFunctions('<%=id%>')" checked="checked" >
<%

}
 }
else
{
%>
    id="'<%=id%>'" onclick="handleUnusedDieFunctions('<%=id%>')" checked="checked" >

<%
}
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.


    
 
Answer
 

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.

    











-






































No comments:















Post a Comment

















        
      








Subscribe to:
Post Comments (Atom)









plot explanation - Why did Peaches&#39; mom hang on the tree? - Movies &amp; TV



In the middle of the movie Ice Age: Continental Drift  Peaches' mom asked Peaches to go to sleep. Then, she hung on the tree. This parti...