"Bind list item events..." returning in separate steps

Question

The actions seemed to be linked up properly, however I noticed that the console.log("Bind list items...") is returning twice, and then returning again a third time. In the video, it shows it returning three times all on the same line in the console.

Any idea why I am getting the console.log twice and then a third time as opposed to all at once? I know that the console.log is executed each time bindTaskEvents is called - i.e. var bindTaskEvents = function(taskListItem, checkBoxEventHandler) { console.log("Bind list item events...");

Here is my code:

// Problem: user interaction doesn't provide desired results
// Solution: add interactivity so the user can manage daily tasks


// global variables
var taskInput = document.getElementById("new-task"); // new-task
var addButton = document.getElementsByTagName("button")[0]; // first button
var incompleteTasksHolder = 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 text from #new-task
        // input (checkbox)
        // label
        // input (text)
        // button.edit
        // button.delete
        // each element needs modified and appended
}



// edit an existing task
var editTask = function() {
    console.log("Edit task...");
    // when the edit button is pressed
        // if class of parent is .editMode
            // switch from .editMode
            // label text becomes input value
        // else
            // switch to .editMode
            // input value becomes 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 ul
}

// mark a task as complete
var taskCompleted = function() {
    console.log("Task complete...");
    // when the checkbox is checked
        // append the task list item to the #completed-tasks
}

// mark a task as incomplete
var taskIncomplete = function() {
    console.log("Task incomplete...");
    // 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 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 taskCompleted to checkbox
        checkBox.onchange = checkBoxEventHandler;
}

// set the click handler for the addTask function
addButton.onclick = addTask;

// 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 completedTasksHolder 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);
}

Welcome to the Treehouse Community

Looking to learn something new?

Matt Bowlby

Matt Bowlby

"Bind list item events..." returning in separate steps