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: Traversing Elements with querySelector

Will Macleod
PLUS
Will Macleod
Courses Plus Student 18,780 Points
Posted by Will Macleod
Will Macleod
Courses Plus Student 18,780 Points

How is taskListItem defined so that it describes the <li> elements?

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
  console.log("Bind list item events");
  //select taskListItem's children
  var checkBox = taskListItem.querySelector("input[type=checkbox]");
  var editButton = taskListItem.querySelector("button.edit");
  var deleteButton = taskListItem.querySelector("button.delete");

    //bind the editTask to editButton
  editButton.onlick = editTask;
    //bind the deleteTask  to the delete button
  deleteButton.onlick = deleteTask;
    //bind checkBoxEventHandler to the checkbox
  checkBox.onchange = checkBoxEventHandler;
}

Hi, I am just not sure how to program knows that the taskListItem is linked to the <li> elements in the ordered list when it is not specified anywhere else.

Thanks

1 Answer

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

When bindTaskEvents is called, the first argument (taskListItem) is passed to it. This is done from a loop that cycles through the child elements of the tasksHolders, which are UL elements.

Since each child of the UL is itself an LI, passing it to bindTaskEvents causes it to be "taskListItem" for the duration of the function.

So essentially, it is linked to the li by the loop that calls the bindTaskEvents function.

Will Macleod
Will Macleod
Courses Plus Student 18,780 Points
Will Macleod
Will Macleod
Courses Plus Student 18,780 Points 
for(var i = 0; i < incompleteTasksHolder.children.length; i++){
    //bind events to list items children (taskCompleted)
  bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}

Is this the loop that cycles through the child elements you're talking about?

if so, is it the incompleteTasksHolder.children[i], is whats taking place of the taskListItem?