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

Posted by Matthew Winzer
Matthew Winzer
9,825 Points

Why/how does this code work: checkbox.onchange = checkBoxEventHandler;

I am having some trouble conceptualizing why/how the

checkbox.onchange = checkBoxEventHandler;

code works within the bindTaskEvents function.

My code is working fine but I just don't quite get why it works.

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 editTask to edit button
  editButton.onclick = editTask;

  //bind deleteTask to delete button
  deleteButton.onclick = deleteTask;

  //bind checkBoxEventHandler to checkbox  
  checkbox.onchange = checkBoxEventHandler;
}

The editButton.onclick = editTask; and deleteButton.onclick = deleteTask; lines make sense to me, because they are calling the related editTask and deleteTask functions.

Does the checkbox.onchange = checkBoxEventHandler; line work because of the for loops used afterwards in the script?

//Cycle over incompleteTasksHolder ul list items
for(var i = 0; i <incompleteTasksHolder.children.length; i++) {
  //bind events to list item's children (taskCompleted)
  bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}

//Cycle over completedTaskHolder ul list items
for(var i = 0; i <completedTasksHolder.children.length; i++) {
  //bind events to list item's children (taskIncomplete)
  bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}

Does checkbox.onchange = checkBoxEventHandler; make it so that when the "change" event occurs on the checkbox the for loops run and the checkBoxEventHandler becomes either taskComplete or taskIncomplete depending on which ul the checkbox is contained in?

Any help would be much appreciated.

1 Answer

Rishit Shah
Rishit Shah
4,975 Points
Rishit Shah
Rishit Shah
4,975 Points

Yes you are absolutely right. In fact the entire binding process happens during the for loops as the function "bindTaskEvents" is being called in the loops(To see this in action comment out the loops. Nothing will happen on clicking the buttons). Hence the editButton and deleteButton bind accordingly. Notice that the value passed for the parameter checkboxEventHandler in the loop of incompleteTaskHolder is taskComplete which means that when the function is executed, a change in the status of the checkbox implies that the previously incomplete task is now complete and vice versa. Hope this helps. If not please let me know. I will try my best to post a more detailed and understandable explanation

Matthew Winzer
Matthew Winzer
9,825 Points

Thank you so much for your response. I'm glad to hear I was on the right track and I definitely have a better understanding of what is going on and why it works now because of your explanation. Thanks again!