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 Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perform: Appending and Removing Elements

Dee K
Dee K
17,815 Points
Posted by Dee K
Dee K
17,815 Points

I don't understand this ONE line of code.

var taskCompleted = function() {
  console.log("Task Complete..");
  //append the task list item to the #completed-tasks
  var listItem = this.parentNode;
  completedTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskIncomplete);          <----------------- This CODE
}

How does this one line of code allow the list items to switch back and forth from

incomplete-tasks and #completed-tasks?

Its so frustrating trying to understand this.

Can someone please give me a detailed answer to this question?

I've read all of the discussions pertaining to this video and I'm still stumped.

I've played around with the console.log and realized without that line of code, while the list item may have been manipulated through the DOM. It still behaves like its still in its original position within the html docs.

Please HELP!!

1 Answer

Seth Kroger
Seth Kroger
56,414 Points
Seth Kroger
Seth Kroger
56,414 Points

Remember that bindTaskEvents() is a function in your code. That one line of code is calling several:

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
    //select it's children
    var checkBox = taskListItem.querySelector("input[type=checkbox]");
    var editButton = taskListItem.querySelector("button.edit");
    var deleteButton = taskListItem.querySelector("button.delete");
        // bind editTask to edit button
    editButton.onclick = editTask;
        // bind deleteTask to delete button
    deleteButton.onclick = deleteTask;
        // bind taskCompleted/taskIncomplete to checkbox
    checkBox.onchange = checkBoxEventHandler;
};

The important line here is the last one, that re-binds the the function called when you check or uncheck the box. Without doing that it would still be bound to the old one, essentially acting like it wasn't moved.