Javascript Uncaught TypeError: Cannot read property 'append' of null in code

Question

I have this html page with a javascript function on it. It is not returning anything on the page but I am getting this on the console:

Uncaught TypeError: Cannot read property 'append' of null at index.html:82

Here is the full page code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>

    <script>

function checkDistance(lat1,lon1,lat2,lon2) {
  var R = 6371; // Radius of the earth in km
  var dLat = deg2rad(lat2-lat1);  // deg2rad below
  var dLon = deg2rad(lon2-lon1); 
  var a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
    Math.sin(dLon/2) * Math.sin(dLon/2)
    ; 
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
  var d = R * c; // Distance in km
  return d;
}

function deg2rad(deg) {
  return deg * (Math.PI/180)
}

var fixedlat = 51.714236;
var fixedlon = 50.710236;
var miles = 20;
var distanceLimit = miles * 1.6; //(km)
var data = [
  {
    "name": "Paul Brooks",
    "location": {
      "lat": 51.714236,
      "lon": 50.710236
    }
  },
  {
    "name": "Jason Orange",
    "location": {
      "lat": 52.030778298795856,
      "lon": 0.364888567109396
    }
  },
  {
    "name": "Mark Way",
    "location": {
      "lat": 53.41899784623413,
      "lon": -1.9138465628943413
    }
  },
  {
    "name": "Ben Bon",
    "location": {
      "lat": 52.30976192959104,
      "lon": -0.4014670363034498
    }
  },
  {
    "name": "Chris Col",
    "location": {
      "lat": 53.45301856182801,
      "lon": -1.8765834388107732
    }
  },
  {
    "name": "Von Van",
    "location": {
      "lat": 53.82771812914788,
      "lon": -0.7563793003592991
    }
  }
];

for(var i = 0;i < data.length;i++){ 

    var result = checkDistance(fixedlat,fixedlon,data[i].location.lat,data[i].location.lon);

    if(result <= distanceLimit){
        var resultList = document.getElementById('resultList');
        resultList.append(data[i].name + ', ');
    }
}



    </script>


</head>
<body>

   <div id="resultList"></div>

</body>
</html>

Why I'm I getting this error and how can I fix it?

Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Sebastian Simon, Mar 29 '17 at 18:59

score 6 · Accepted Answer · answered Mar 29 '17 at 19:20

Your javascript code executes even before the html is loaded, due to which it is unable to locate 'resultList' element.

Wrap your below code in some function.

function foo(){
    for(var i = 0;i < data.length;i++){ 
        var result = checkDistance(fixedlat,fixedlon,data[i].location.lat,data[i].location.lon);
        if(result <= distanceLimit){
            var resultList = document.getElementById('resultList');
            resultList.append(data[i].name + ', ');
        }
    }
}

Now call this function through onload() event which will be executed only when whole page is loaded.

<body onload="foo()">
   <div id="resultList"></div>
</body>

score 3 · Answer 2 · answered Mar 29 '17 at 19:08

The script begins executing before the DOM is fully loaded, so the call to document.getElementById('resultList'); returns null.

One way to fix, move your <script> tag to appear after the <body> element

Another way, wrap your code in a call to document.addEventListener:

document.addEventListener("DOMContentLoaded", function(event) {     
   // copy code here
});

Or use jQuery:

$(document).ready(function(event) {     
   // copy code here
});

pradeep · Answer 3 · 2022-10-04T03:29:18.847

0

Wrap your for loop in some function and call that function in load event,

or else try to add your scrpit a defer coz it helps JS code is executing before the HTML.

edited Oct 04 '22 at 03:29

answered Oct 04 '22 at 03:23

pradeep

11
2

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 07 '22 at 21:48

score -1 · Answer 4 · answered Mar 29 '17 at 19:00

-1

You need to declare a variable for resultList; it is not yet defined.

var resultList = document.getElementById('resultList');

Just make sure that line is above the offending append code.

answered Mar 29 '17 at 19:00

Rob Brander

3,702
1
20
33

Javascript Uncaught TypeError: Cannot read property 'append' of null in code

4 Answers4