Uncaught TypeError: Cannot read property 'addEventListener' of null in javascript

Question

I am trying to implement infinite scrolling. In order to do it, I grabbed some very simple javascript and try running it as toy example but actually, it does not work, I do not have much knowledge about how javascript running with DOM. I run into error "Uncaught TypeError: Cannot read property 'addEventListener' of null" when opening it in the browser. Actually, I tried to add some function window.onload something like it, but still it does not work properly. Does anyone have some quick answer for this?

<!DOCTYPE html>
<html>
<head>
<style>
#infinite-list {
  /* We need to limit the height and show a scrollbar */
  width: 200px;
  height: 300px;
  overflow: auto;

  /* Optional, only to check that it works with margin/padding */
  margin: 30px;
  padding: 20px;
  border: 10px solid black;
}

/* Optional eye candy below: */
li {
  padding: 10px;
  list-style-type: none;
}
li:hover {
  background: #ccc;
}
</style>
<script> 
var listElm = document.getElementById('infinite-list');

// Add 20 items.
var nextItem = 1;
var loadMore = function() {
  for (var i = 0; i < 20; i++) {
    var item = document.createElement('li');
    item.innerText = 'Item ' + nextItem++;
    listElm.appendChild(item);
  }
}

// Detect when scrolled to bottom.
listElm.addEventListener('scroll', function() {
  if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
    loadMore();
  }
});

// Initially load some items.
loadMore();
</script>
</head>
<body>

<ul id='infinite-list'>
</ul>

</body>
</html>

score 0 · Answer 1 · answered Feb 22 '18 at 12:44

Because script running before this element exist Put script below:

<!DOCTYPE html>
<html>
<head>
<style>
#infinite-list {
  /* We need to limit the height and show a scrollbar */
  width: 200px;
  height: 300px;
  overflow: auto;

  /* Optional, only to check that it works with margin/padding */
  margin: 30px;
  padding: 20px;
  border: 10px solid black;
}

/* Optional eye candy below: */
li {
  padding: 10px;
  list-style-type: none;
}
li:hover {
  background: #ccc;
}
</style>

</head>
<body>

<ul id='infinite-list'>
</ul>

</body>
<script> 
var listElm = document.getElementById('infinite-list');

// Add 20 items.
var nextItem = 1;
var loadMore = function() {
  for (var i = 0; i < 20; i++) {
    var item = document.createElement('li');
    item.innerText = 'Item ' + nextItem++;
    listElm.appendChild(item);
  }
}

// Detect when scrolled to bottom.
listElm.addEventListener('scroll', function() {
  if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
    loadMore();
  }
});

// Initially load some items.
loadMore();
</script>
</html>

This works well, thank you so much!! – Anna Lee Feb 22 '18 at 13:58 — Anna Lee, Feb 22 '18 at 13:58

score 0 · Answer 2 · answered Feb 22 '18 at 12:48

Use the below code:

    <!DOCTYPE html>
<html>
<head>
<style>
#infinite-list {
  /* We need to limit the height and show a scrollbar */
  width: 200px;
  height: 300px;
  overflow: auto;

  /* Optional, only to check that it works with margin/padding */
  margin: 30px;
  padding: 20px;
  border: 10px solid black;
}

/* Optional eye candy below: */
li {
  padding: 10px;
  list-style-type: none;
}
li:hover {
  background: #ccc;
}
</style>
<script> 
function show()
{
    var nextItem = 1;
    for (var i = 0; i < 20; i++) 
    {
        var x = document.createElement("LI");
        var t = document.createTextNode('Item ' + nextItem);
        x.appendChild(t);
        document.getElementById("infinite-list").appendChild(x);

        nextItem++;
  }
}
</script>
</head>
<body onload="show()">
<ul id='infinite-list'>
</ul>
</body>
</html>

Uncaught TypeError: Cannot read property 'addEventListener' of null in javascript

2 Answers2