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

Seth Johnson
Seth Johnson
15,199 Points
Posted by Seth Johnson
Seth Johnson
15,199 Points

Am I missing something?

My JS console keeps telling me I have an error with this section of my code:

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

Which as far as I can tell is exactly replicated from the code in the video. Can anyone help figure out what's going on here? Thanks!

Mike Hatch
Mike Hatch
14,940 Points
Mike Hatch
Mike Hatch
14,940 Points

You're right, Steven, but I did say "Without seeing any other code" to start my Comment. I'm unable to delete my comment, but I'll go ahead and edit it down to zero.

Mike Hatch
Mike Hatch
14,940 Points
Mike Hatch
Mike Hatch
14,940 Points

I believe it's because my account is currently paused.

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Not sure why, but perhaps that's it.

Nelson J
Nelson J
7,411 Points

I am having the same problem the error I get is: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at HTMLButtonElement.<anonymous>

Can you help me Steven Parker
code snapshot: https://w.trhou.se/lqg7tuxqkv

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Nelson: I'll try to take a look soon, but to have a better chance of getting help from the community, always start a fresh question when you have an issue that isn't solved by the answer(s) already given.

Nelson J
Nelson J
7,411 Points

Steven Parker no need to, I was able to get it to work and roger that!

2 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Errors are often detected in locations far from where they are caused. For example, this code could easily fail if there is something wrong in the HTML code in a completely different file!

So it's best to share the complete code to facilitate a complete analysis. An easy way to share your complete environment and all code is to make a snapshot of your workspace and post the link to it here.

UPDATE: Now that the rest of the code is here, I see you have this HTML element:

        <button class="addItemButton">Add Items to the list!</button>

And then the script attempts to select it:

const addItemButton = document.querySelector('input.addItemButton');

But that selection fails because it is looking for an input element instead of a button element.

Mike Hatch
Mike Hatch
14,940 Points
Mike Hatch
Mike Hatch
14,940 Points

Well done, Steven. When I received the alert I attempted to debug the code myself. I wasn't able to debug what you did, but I did spot Line 20 after attempting to use the "Change List Description" button. Error: descriptionP is not defined.

Seth Johnson
Seth Johnson
15,199 Points
Seth Johnson
Seth Johnson
15,199 Points

Man, it took me way, way too long to figure out my very obvious error here. Thanks!

Seth Johnson
Seth Johnson
15,199 Points
Seth Johnson
Seth Johnson
15,199 Points

Thanks! I do need to provide some more info now that I look at it. Here's the index.html markup:

<!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 Items to the list!</button>
      </div>
    <script src="app.js"></script>
  </body>
</html>

and then plugging it in with this JS:

const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionButton = document.querySelector('button.description');
const myHeading = document.querySelector('#myHeading');
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 = '';
});

gives me the error message of: TypeError: null is not an object (evaluating 'addItemButton.addEventListener')

which is in reference to this line of my JS:

addItemButton.addEventListener('click', () => {

Soooo, I'm still kind of left scratching my head. Apologies for the lack of context with the original post.

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Much better, and I expanded my answer.