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 trialDee K
17,815 PointsI 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
56,413 PointsRemember 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.