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 trialRobert Farese
7,944 Pointshow is deleteButton.onclick = deleteTask running if its in a function that hasn't been called?
Since deleteButton is a variable inside a function, and the deleteButton.onclick = deleteTask is also inside the body of the function, then how does the deleteButton.onclick = deleteTask execute if the function(taskListItem, checkBoxEventHandler) was never invoked?
2 Answers
Emmanuel Obi
14,912 PointsSounds like callback hell. If you give a bit more info. about your issue (i.e. paste some code) then I can be more helpful.
Daniel Jenkins
17,714 PointsThe "bindTaskEvents" function you mention is invoked every time the page is loaded.
The vast majority of the code you've pasted contains declarations and function expressions but the last few lines, from
addButton.onclick = addTask;
onwards are just straightforward JavaScript code which runs when the page is loaded. The two blocks immediately after "addButton.onclick..." loop through the two task lists adding the functionality you've described using the "bindTaskEvents" function.
//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 completeTasksHolder 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);
This means that as soon as you load your page and the JavaScript runs the functions is called and the events are assigned to any buttons on the page.
Probably clear as mud but assuming I'm actually right I hope that helps!
Robert Farese
7,944 PointsRobert Farese
7,944 PointsSorry, thought I was posting a question where someone would know it was associated with the current lesson.
If you scroll down to "var bindTaskEvents", you'll see the section I'm referring too. When the user clicks the delete button, the deleteButton.onclick = deleteTask is triggering and deleteTask runs which would cycle through the list of elements and remove the appropriate <li> element.
I understand what is happening, and the code does what the instructor is saying it should do, but I just don't understand how the event is actually triggering deleteButton.onclick if its inside the function that was never invoked...
Thanks for your help!
Here's the code from the session: