Geo Location Trace getElementById not working

Question

I am working on a challenge by freecodecamp, Task is to show the local weather and hence I have to get the location of the user. I can get the location from here but after printing that i was trying to getElementById of a div i have printed using JS which gives null in response. I want to get the key value pair so that i can do stuff with them. Here is my code:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>Location Trace | freecodecamp Challanges</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
        <div id="GeoResults"></div>
        <script>
        $.getJSON("http://ip-api.com/json/?callback=?", function(data) {
            var table_body = "";
            var count = 0;
            $.each(data, function(k, v) {
    //JSON.stringify(j); // '{"name":"binchen"}'
    
    table_body += '<div id=Coun_'+count+'>'+v+'</div>';
    
                //table_body += "<tr><td id='FC_"+count+"'>" + k + "</td><td><b id='SC_"+count+"'>" + v + "</b></td></tr>";
                count++;
            });
            $("#GeoResults").html(table_body);
        });
        </script>
        <script> 
   var x = document.getElementById('Coun_1') /*= 'Dooone!!!'*/;
   console.log(x);
        </script>
    </body>
</html>

Thanks in Advance!

You are adding those elements using a async api, so when the getElementById is called those elements are not yet added to the dom — Arun P Johny, Mar 30 '16 at 07:27
thanks for your quick reply Arun, can you please help me out here by just elaborating about Async. Where do i start? — , Mar 30 '16 at 07:32
about async http://stackoverflow.com/questions/3393751/what-does-asynchronous-means-in-ajax — GuRu, Mar 30 '16 at 07:44
Why don't you just move `var x = document.getElementById('Coun_1') /*= 'Dooone!!!'*/; console.log(x);` to just after `$("#GeoResults").html(table_body);` and see — Arun P Johny, Mar 30 '16 at 07:46

score 0 · Accepted Answer · answered Mar 30 '16 at 07:43

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>Location Trace | freecodecamp Challanges</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
        <div id="GeoResults"></div>
        <script>
        $.getJSON("http://ip-api.com/json/?callback=?", function(data) {
            var table_body = "";
            var count = 0;
            $.each(data, function(k, v) {
    //JSON.stringify(j); // '{"name":"binchen"}'
    
    table_body += '<div id=Coun_'+count+'>'+v+'</div>';
    
                //table_body += "<tr><td id='FC_"+count+"'>" + k + "</td><td><b id='SC_"+count+"'>" + v + "</b></td></tr>";
                count++;
            });
            $("#GeoResults").html(table_body);
            var x = document.getElementById('Coun_1').innerHTML; /*= 'Dooone!!!'*/;
   console.log(x);
        });
        </script>
    </body>
</html>

Geo Location Trace getElementById not working

1 Answers1