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 children

Nicholas Castello
Nicholas Castello
3,574 Points

Why does the bindTaskEvents loop work?

I think I understand what the purpose of these loops are, I just don't understand HOW they are actually accomplishing what we need them to do

My understanding is that these loops are necessary to connect the functions of each button/input to it's respective list item. I get that. But how does the loop actually accomplish this?

It seems to me like the loop would just run though once, and then stop. When someone adds a new task, how do the new buttons/inputs get bound to their functions? Does the loop somehow run again?

Any clarity on how these loops are actually working would be much appreciated, as they are not well explained in this video.

do you mean for loops? I ask because I can't watch the video right now, but I will be happy to help/

Nicholas Castello
Nicholas Castello
3,574 Points

Yes, Andrew is using For loops to bind each event function to their respective button or input. I understand how this would work initially (e.g. when the page first loads), but I don't see how this works for events that are added or modified after the page loads (and presumably the For loops have stopped).

Without seeing any code its a little hard to know what is going on. In a bit I'll take a look at the video and see what Andrew is doing. Sorry for the delay.

1 Answer

rydavim
rydavim
18,814 Points

Looking over the code from that course, it looks like you're referring to the two for loops which are iterating over the existing items in the incompleteTasksHolder and completedTasksHolder lists. This works because they're calling the bindTaskEvents function on each existing task list item when the page initially loads.

// This for loop iterates over each existing task list item when the page loads, and calls the bindTaskEvents function.
for (var i = 0; i < incompleteTasksHolder.children.length; i++) {
  // Here we call the bindTaskEvents function on the current list item. This is where the onclick events get bound.
  bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}

You are correct that these for loops do not effect new items, they are only run when the page first loads. The bindTaskEvents function is what handles attaching the relevant events to new list items. This function is called on existing items when the page loads using the for loop above, but it is also called when you create new items, and when you move items from one list to the other.

Every time the bindTaskFunction is called, each of the buttons have their onclick event bound to their respective functions.

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
  // Note - I removed some code here to shorten the block for forum posting.

  // The three lines below bind each button to their respective functions.
  // The function is then called whenever the button is clicked.
  editButton.onclick = editTask;
  deleteButton.onclick = deleteTask;
  checkBox.onchange = checkBoxEventHandler;
}

Hopefully that clears up some things, but please let me or Jacob Mishkin know if it still seems confusing. Happy coding!

Oğulcan Girginc
Oğulcan Girginc
24,848 Points

Hi rydavim

Do know any resources to recommend about this topic?

rydavim
rydavim
18,814 Points

I would refer to the MDN documentation for the onclick and onchange events. If that documentation is too technical, or doesn't answer your question, please post a new question topic and I'm sure myself or another student will be able to help. :)