Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Making Changes to the DOM Appending Nodes

Patrick Shushereba
Patrick Shushereba
10,911 Points
Posted by Patrick Shushereba
Patrick Shushereba
10,911 Points

Uncaught TypeError: Cannot read property 'addEventListener' of null

Hey guys,

I'm getting the following error when I try and run my code:

Uncaught TypeError: Cannot read property 'addEventListener' of null

I've gone back and reviewed the video and my code, and I can't seem to find the problem. I was hoping someone might be able to help me.

Here is my app.js file:

const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.description');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('input.addItemButton');

toggleList.addEventListener('click', () => {
 if (listDiv.style.display === 'none') {
  toggleList.textContent = 'Hide list';  
  listDiv.style.display = 'block';
  } else {
    toggleList.textContent = 'Show list';
    listDiv.style.display = 'none';
  }                       
 });

descriptionButton.addEventListener('click', () => {
  descriptionP.innerHTML = descriptionInput.value + ':';
  descriptionInput.value = '';               
});

addItemButton.addEventListener('click', () => {
  let ul = document.getElementsByTagName('ul')[0]; 
  let li = document.createElement('li');
  li.textContent = addItemInput.value;
  ul.appendChild(li);
  addItemInput.value = '';
});

And here is my index.html file:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>
    <button id="toggleList">Hide list</button>

    <div class="list">
      <p class="description">Things that are purple:</p>
      <input type="text" class="description">
      <button class="description">Change list description.</button>
      <ul>
        <li>grapes</li>
        <li>amethyst</li>
        <li>lavender</li>
        <li>plums</li>
      </ul>
      <input type="text" class="addItemInput">
      <button class="addItemButton">Add Item</button>
    </div>
    <script src="app.js"></script>
  </body>
</html>

I've searched around the forum here, and come across people with similar issues. But if it's a simple spelling error, I haven't been able to find it. I checked to make sure the <script> tag is linking the javascript. Any help would be greatly appreciated.

2 Answers

Dave StSomeWhere
Dave StSomeWhere
19,870 Points
Dave StSomeWhere
Dave StSomeWhere
19,870 Points

Yep - just a minor typo or probably doing the copy/paste too quickly 

// incorrectly using input
const addItemButton = document.querySelector('input.addItemButton');

// change to button and will work
const addItemButton = document.querySelector('button.addItemButton');

:tropical_drink: :palm_tree:

Patrick Shushereba
Patrick Shushereba
10,911 Points
Patrick Shushereba
Patrick Shushereba
10,911 Points

Thank you for getting back to me! I knew it had to be something simple like that.