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? — Sebastian Simon
– Sebastian Simon, Commented Mar 29, 2017 at 18:59

Jaspreet Singh · Accepted Answer · 2017-03-29 19:20:30Z

6

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>

answered Mar 29, 2017 at 19:20

Jaspreet Singh

1,7622 gold badges16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ryan · Accepted Answer · 2017-03-29 19:08:02Z

3

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

answered Mar 29, 2017 at 19:08

ryan

1,46312 silver badges27 bronze badges

Comments

pradeep · Accepted Answer · 2022-10-04 03:29:18Z

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 4, 2022 at 3:29

answered Oct 4, 2022 at 3:23

pradeep

112 bronze badges

1 Comment

Community Over a year ago

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.

Rob Brander · Accepted Answer · 2017-03-29 19:00:40Z

-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, 2017 at 19:00

Rob Brander

3,7831 gold badge22 silver badges33 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related