Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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,403 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.