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

Hayden Bradfield
Hayden Bradfield
1,797 Points

Will someone explain to me what these "for" statements mean when traversing (JS to-do list course)?

Everything was fine and understandable until he got to the traversing lesson and now I am lost. I don't know what these "for" statements do with my code (towards the bottom of the code).

//Problem: User interaction doesnt provide desired results
//Solution: Add interactivity so the user can manage daily tasks

var taskInput = document.getElementById("new-task");
var addButton = document.getElementsByTagName("button")[0]; //First Button
var incompleteTasksHolder = document.getElementById("incomplete-tasks"); 
var completedTasksHolder = document.getElementById("completed-tasks"); 

var addTask = function() {
//Add a new task
  console.log("Add Task...");
  //When the button is pressed
    //Create a new list item from #new-task
        //input checkbox
        //label
        //input (text)
        //button .edit
        //button .delete
        // Each elements needs modified and appended
}

var editTask = function() {
//Edit an existing task
  console.log("Edit Task...");
    //When the edit button is pressed
        //if li is .editmode
            //Switch from .editmode
            //label text become input value
        //else
            //Switch to .editmode
            //input value becomes label's text

        //Toggle .editmode on the parent 
}


var deleteTask = function() {
//Delete an existing task
  console.log("Delete Task");
    //When delete button is pressed
      //remove parent list item from the unordered list
}

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

var taskIncompleted = function() {
//Mark a task as incomplete
  console.log("IncompleteTask...");
  //When checkbox is unchecked
    //Append the list item to #incomplete-tasks
}

// WIRING 

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
    console.log("Bind list items...");
    //select its children
        //bind editTask to the edit button
        //bind deleteTask to delete button
        //bind checkBoxEventHandler to checkbox

}

//Set the click handler to the addTask function
addButton.onclick = addTask;

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

//cycle over completedTasksHolder ul list items
    for (var i = 0; i < completedTasksHolder.children.length; i++) {
    //for each list item
        //bind events to list item's children (taskIncompleted)
        bindTaskEvents(CompleteTasksHolder.children[1], taskIncompleted);
}   

1 Answer

Angelica Hart Lindh
Angelica Hart Lindh
19,465 Points

Hey Hayden,

You should think of a for loop as something that is going to execute in your code over and over again until a condition is met in order to break out of the loop.

So in the case of your code, if we take for example the below loop:

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

When the javascript renderer reaches the point where for is declared it will assess the arguments within the parentheses (var i = 0; i < incompleteTasksHolder.children.length; i++). This statement sets up a variable called 'i' and assigns the value zero to it. Next it checks if 'i' is less than incompleteTasksHolder.children.length and if the condition returns true, it will enter the code block within the { } and execute the function within it.

In your case your loop is finding an <ul> tag and iterating over each of the children and executing the bindTaskEvents() function on each list item until it has reached the end of the list. E.g.

<ul>
    // When the 'for' loop starts "var i = 0" 
    <li>Apple</li>// "i = 0"
    <li>Orange</li>// "i = 1"
    <li>Banana</li>// "i = 2"
    <li>Pear</li>// "i = 3"
    // "var i = 3" which is the length of the <ul>'s children <li> tags so the for loop breaks out and stops iterating
    // !Remember index always starts at 0 
</ul>

Hope this helps. If it is too trivial I apologise, but if it is please post some more code and the link to the course so I can get a deeper understanding of what is trying to be achieved and what the DOM tree looks like.

Hayden Bradfield
Hayden Bradfield
1,797 Points

This is from the video in the full stack javascript track. It is the course "Interactive Webpages with Javascript"

Why did he choose the index of [1] and not all of them?

Angelica Hart Lindh
Angelica Hart Lindh
19,465 Points

You should use .children[i] as your reference not 1. Andrew states it in the course around minute 9.00 in the course.