Uncaught TypeError: Cannot read property 'addEventListener' of null

Hi Fellow learners

I got this issue that I can’t get passed. Tried to google it and searched on StackOverflow but still stuck.
I’m working on this simple ToDo list script but get the following error: “Uncaught TypeError: Cannot read property ‘addEventListener’ of null”

Here’s my HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST SITE</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <h1 class="title">Hi There!</h1>
    <button class="addListBtn">Click me</button>

    <ul class="name-list">
        <li>Do</li>
        <li>Re</li>
        <li>Mi</li>
        <li>Fa</li>
        <li>So</li>
    </ul>

    <input class="list-input" type="text">

    <script src="./main.js" charset="utf-8" defer></script>
</body>

</html>

And here’s my JS code:

const userList = document.querySelector(".name-list");
const listInput = document.querySelector(".list-input");
const addListBtn = document.querySelector(".addListBtn");

addListBtn.addEventListener('click', function() {
    const newLi = document.createElement("LI");
    const liContent = document.createTextNode(listInput.value);
   
    newLi.appendChild(liContent);
    userList.appendChild(newLi);
});

Any help is greatly appreciated.
Michel

Hi Michel,
when I run your code in Fiddle, it does what it (probably) should without throwing errors.
The only thing that looks odd to me is the uppercase tag name in createElement. But that is not directly related to the error message.
What do you get when you log addListBtn to the console? Because that variable obviously cannot be found.

I have just found the solution! Thought I’d share with you forum readers…

In many replies on StackOverflow to similar issues the suggestion was given that the call should be at the bottom of the body. Many had placed it in the Head section. However, I already had put it at the bottom from the beginning so that wasn’t the solution for my issue.

I tried adding the ‘defer’ attribute to the script call but no luck either. Finally, as a last attempt, I placed the script call (with the defer attribute) to the head section and all worked fine!

Hi Mirja

Thanks for your reply and your suggestion. I have already found the solution, though it initially seemed unlogically to me since so may devs advised something different. See my solution in my reply above.

Cheers,
Michel

1 Like

Did you wrap your JS in something like this?

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

When you run your code locally, you probably don’t have the issue with content being loaded with delay, but remotely you might be running into the issue again.

Edit: overlooked that you wrote that still have the defer attribute in your style tag, so that should work then.

1 Like