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

Posted by christian gamboa
christian gamboa
10,097 Points

Could anyone see what's wrong with my approach?

I have a different approach for adding buttons dynamically for each new item without the loop or the node.children property. I would like to know if this approach is good for real life applications. Perhaps I feel it is too procedural. Any feedback ?

addItemButton.addEventListener('click', ()=>{
  let ul = document.getElementsByTagName('ul')[0];  

  let li = document.createElement('li');

  let buttonRemove = document.createElement('button');
  let buttonUp = document.createElement('button');
  let buttonDown = document.createElement('button');

  li.textContent = addItemInput.value;
  ul.appendChild(li);

  li.appendChild(buttonUp);
  li.appendChild(buttonDown);
  li.appendChild(buttonRemove);

  buttonUp.className = 'up';
  buttonDown.className = 'down';
  buttonRemove.className = 'remove';

  buttonUp.textContent = 'Up'
  buttonDown.textContent = 'Down';
  buttonRemove.textContent = 'Remove';

  addItemInput.value = "";
});
Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

Is this in reference to an example given in a course? Please provide a link to the course page for comparison.

christian gamboa
christian gamboa
10,097 Points

Steven Parker Here is the link to the video for comparison: https://teamtreehouse.com/library/getting-all-children-of-a-node-with-children thank you.

2 Answers

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

What about the initial buttons?

This code looks like a functional equivalent for the "add item" button. But what about the functionality of attaching buttons to the initial list items? It doesn't seem like any list items already on the form when the page loads would get buttons without the code that loops through them and calls attachListItemButtons on each one.

I think the reason attachListItemButtons was a separate function was primarily to perform this initialization but still keep the code "DRY" for when an item is added dynamically.

christian gamboa
christian gamboa
10,097 Points
christian gamboa
christian gamboa
10,097 Points

All initial list items have buttons attached when the page loads. Even new items added append buttons. Each button does what it is supposed to do. The code I have works just like the demonstration except, I do not use the additional functions nor loop. I wonder if maybe my solution is not the right approach to the task, perhaps it would become 'buggy' when additional functionality is added. I am a beginner and I do not think I would've come up with the teacher's approach, so I did my own version as if I had to come up with a solution. The code below also works but it still requires to iterate with a for loop.

// 'x' values : up, down, remove, other...
function attachlistItemButtons(li, x){
  let x = document.createElement('button');
  x.className = 'x';
  x.textContent = 'x';
  li.appendChild(x);  
}
//call function
attachListItemButtons(li, remove);
attachListItemButtons(li, up);
attachListItemButtons(li, down);
attachListItemButtons(li, done);
attachListItemButtons(li, pending);
Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

I don't see how the first code in the question would handle initial list items, but perhaps there aren't any? But that does seem to be the only significant difference.

In future questions, to enable a more complete and accurate analysis, make a snapshot of your workspace and post the link to it here, and also provide a link to the course page you are working with.