Uncaught typeerror: cannot read property 'value' of null

See more:

Javascript

JSP

PostgreSQL

Hello,

I have create a map in shows that marker in location of latitude & longitude but I have issue in getting a values in location.

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

geomfeatures=document.getElementById("featurebox");
                         //alert(geomfeatures.childNodes.length);
                         for(i=0;i<geomfeatures.childNodes.length;i++)
                         {
                             lat=document.getElementById("lat"+i).value;
                             alert(lat);
                             lng=document.getElementById("lng"+i).value;
                             alert(lng);
                             L.marker([lat,lng]).bindPopup("Hello World").addTo(map);

                         } 

<a href="http://localhost:8080/LeafletMarker/"></a>

What I have tried:

function test()
        {
            geomfeatures=document.getElementById("featurebox");
                  //  alert(geomfeatures.childNodes.length);
                    for (i=0;i<geomfeatures.childNodes.length;i++)
                    {
                        totalgeom=document.getElementById("geom"+i).value;
                        alert(totalgeom);
                    }
        }
        
    
  
        <%
        response.setHeader("Cache-Control", "no-cache"); //Forces caches to obtain a new copy of the page from the origin server
        response.setHeader("Cache-Control", "no-store"); //Directs caches not to store the page under any circumstance
        response.setDateHeader("Expires", 0); //Causes the proxy cache to see the page as "stale"
        response.setHeader("Pragma", "no-cache"); //HTTP 1.0 backward compatibility
        %>
        <jsp:useBean id="Join" class="beans.LeafletJoin"/>
                <% 
                    ArrayList<hashmap> temp = null;
                    temp = Join.getGeometryList();
                    request.setAttribute("geom", temp);
                %>  
                
                <div id="featurebox">
                    <c:forEach var="row" items="${geom}" varStatus="status">
                        <input type='hidden' id="lat<c:out value="${status.index}"/>" value="<c:out value="${row.latitude}"/>"/>
                        <input type='hidden' id="lng<c:out value="${status.index}"/>" value="<c:out value="${row.longitude}"/>"/>
                    
                </div>  
              
                <div id="map"></div>