Need explanation of code - Interactive Web Pages course

Question

So I am confused about the very bottom part of the code where i use a for loop...I am not sure why im using: bindTaskEvents(incompleteTaskHolder.children[i], taskCompleted);

Here is the full snippet of code:

// Problem: User interaction doesn't provide desired results.

//Solution: Add interactivity so the user can manage daily tasks.

 var taskInput = document.getElementById("new-task"); //new-task
 var addButton = document.getElementsByTagName("button")[0]; //first button
 var incompleteTaskHolder = document.getElementById("incomplete-tasks"); //incomplete tasks
 var completedTasksHolder = document.getElementById("completed-tasks"); //completed tasks
 // Add a new task
 var addTask = function(){
 console.log("Add task..");
 // When the button is pressed:
// Create a new list item with the text from #new-task:
// Input (checkbox)
// label
// input (text)
// button.edit
// button.delete
// Each elements, needs modified and appended
}

// Edit an existing task
var editTask = function (){
console.log("Edit task..");
// When the edit button is pressed
 // if the class of the parent is .editMode
  //Switch from .editMode
  // Label text become the input's value
  //else
    // Switch to .editMode
    // input value become s the label's text

// toggle .editMode on the parent
}
// Delete an existing task
var deleteTask = function(){
console.log("Delete task..");
// When the delete button is pressed:
// Remove the parent list item from the unordered list
}
// Mark a task as complete
var taskCompleted = function(){
console.log("Completed task..");
// When the checkbox is checked
// Append the task list item to the #completed-tasks
}
// Mark a task as incomplete
var taskIncomplete = function(){
console.log("Incomplete task..");
// When the checkbox is unchecked

//Append the task list item to the #incomplete-tasks. }

var bindTaskEvents = function(taskListItem, checkBoxEventHandler){
console.log("Bind list item events");
// select it's children
//Bind editTask to editButton
//bind deleteTask to the deleteButton
//Bind checkBoxEventHandler to the checkbox
}

//Set the click handler to the addTask function

addButton.onclick = addTask;

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

Answer 1 · 2016-09-08T23:33:31Z

September 8, 2016 11:33pm

Hi Robert,

Each list item has a delete and edit button and a checkbox.

The purpose of the for loops is to loop through all the list items from both lists and assign handlers for each of those 3 controls.

It does this by calling the bindTaskEvents function. Each time through the loop you pass the current list item as the first argument and the function you want to use for the checkbox handler as the second argument. This is the function that's going to be called when you click on a checkbox.

Let me know if I've misunderstood what you were asking about.

It will probably make more sense too as you get farther and have more of the code in place.

Welcome to the Treehouse Community

Looking to learn something new?

Robert Cable

Robert Cable

Need explanation of code - Interactive Web Pages course

1 Answer

Jason Anello

Jason Anello