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

Can someone please help me with whats wrong with my code..! https://w.trhou.se/zlyd7f75lo

Can someone please help me with whats wrong with my code..! https://w.trhou.se/zlyd7f75lo

2 Answers

Steven Parker
Steven Parker
231,269 Points

Everything seems to work except for the button to add a new item.

There are a few issues in the handler for that button:

  • a new item is created, but it is given the confusing name "myList"
  • no variable is created to represent the actual list
  • the appendChild attempts to attach a string to the new item (instead of the new item to the list)
  • it's difficult to use the video as an example because the HTML structure has been changed
Steven Parker
Steven Parker
231,269 Points

Here's more details on the points made above, in reference to the code from app.js, starting at line 40:

myListButton.addEventListener("click", function () {
  let myList = document.createElement("li");
  myList.textContent = listItem.value;
  myList.appendChild("li");

So on line 41, a new element is created and assigned to a new variable named "myList". But this choice of name is confusing for 2 reasons: it represents a single element (not a list), and it overrides an existing global variable with the same name.

Then, to be able to attach this element (using appendChild) to the unordered list in the document, you would need a variable to represent the list itself. But no such variable is being created in this function.

Then on line 43, the statement "myList.appendChild("li")" attempts to attach a simple string with the letters "li" (instead of the new element) to the new element (instead of to the list). This is where the reference to the list would be needed.

And my final comment was just pointing out that the code in index.html is different from the code shown in the video, so the JavaScript shown in the video would not work with it correctly.

Dear Steven,

I didnt get any of your point. Can you please go through my code again where you would find the variable name myList.!

Thanks.!

Steven Parker
Steven Parker
231,269 Points

I added to a comment with details to my original answer.