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

Joseph Thomas
PLUS
Joseph Thomas
Courses Plus Student 9,067 Points
Posted by Joseph Thomas
Joseph Thomas
Courses Plus Student 9,067 Points

Receiving "Uncaught TypeError: Cannot read property 'addEventListener' of null at app.js:19". Please Help!

Good day everyone. I apologize for posting the JavaScript code this way, but I was not sure how to post it the other way. I have looked through my code and I cannot understand why the error continues to pop up. I thought it was because of the Arrow Function expression for the code:

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

Problem is when I changed it to the older syntax Function Declaration, it still did not work. I do not know what I am missing, but I am hoping one of my fellow Tree House community members can find the problem. I appreciate any help one could offer. Thank you very much.

CODE BELOW

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( ' button.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 + ' : ';
});

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

Use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:   Or watch this video on code formatting.

Also, this script relies on an HTML component to work, so that part of the code should also be posted. Even better, make a snapshot of your workspace and post the link to it here.

Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,671 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,671 Points

Question updated with code formatting. Check out the Markdown Cheatsheet for syntax examples.

Edit: Removed link to MC

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

Rich, That link might not do what you expect. Try it and see!

1 Answer

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

Without seeing the HTML I can't be completely certain, but I strongly suspect the problem is due to the spaces inside the string arguments to the element selecting functions.

Unless the element ID contains the exact same spacing in the HTML, the value of "toggleLlist" is likely to be null because no match will be found.

Joseph Thomas
Joseph Thomas
Courses Plus Student 9,067 Points
Joseph Thomas
Joseph Thomas
Courses Plus Student 9,067 Points

I just added the spaces to make it a little more readable. I probably should have posted the exact code within the strings. My bad. I found the problem. Unfortunately, since I was too busy examining my JS code, I did not realize that in my HTML code I had accidentally typed an extra s to my description button class (ex: classs). Which in turn caused my JS code to not work properly. Thank you for your response, because of it I looked over my HTML code from top to bottom and finally realized the error. A rookie mistake.

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

For appearance, add spacing only outside of strings. For example, this will not find an element with id="toggleList":

document.getElementById( " toggleList " );

But this will:

document.getElementById( "toggleList" );