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

Posted by Vince Shao
Vince Shao
6,107 Points

Why for loops work?

I understand using for loop can cycle over all list items, and fire the triggered events, I'm not quite how it actually works though.

At first I thought for loop would end as long as the condition is false, but in this case it seems like the loop would run while new list items are appended to unoder lists.

Does this mean for loops would run from zero once again while the condition is turned true endlessly if it's put at the end of the code?

Thanks for helping me in advance!!

//create events
function taskEvents(list, checkboxEvent) {
  var editButton = list.querySelector("button.edit");
  var deleteButton = list.querySelector("button.delete");
  var checkBox = list.querySelector("input[type=checkbox]");

  editButton.onclick = editTask;
  deleteButton.onclick = deleteTask;
  checkBox.onchange = checkboxEvent;
}

//when the add button is pressed
addButton.onclick = addTask;


//cycle over incomplete task's ul list items
for( var i = 0; i < incompleteTasksHolder.children.length; i++) {
  taskEvents(incompleteTasksHolder.children[i], taskIncomplete);
};

//cycle over completed task's ul list items
for( var i = 0; i < completeTaskHolder.children.length; i++) {
  taskEvents(completeTaskHolder.children[i], taskCompleted);
};

3 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

I don't recognize this code - is it from an exercise in one of the courses here?

But it appears these loops just run once when the code is loaded, calling a function that establishes event handlers for existing list items but does not append any new items to the lists.

If the lists are appended later, I would not expect these loops to run again.

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

You have an array. The array length is [1,2,3,4].length that's 4. So everytime you loop an array out it becomes smaller until the entire array disappears to 0, then the for statement becomes false.

Hence, the for loops stops. I hope that helps. So it loops once 1,2,3 and length of array becomes 3. Then it loops again. The length becomes 2 and 1,2 are left. You get it?

Joseph Szoke
Joseph Szoke
15,087 Points
Joseph Szoke
Joseph Szoke
15,087 Points

There are a couple of options a for loop can have. Where it starts? (i = 2;) although most for loops will start at 0 (i = 0;). How long it will run for? A popular option is getting the length of what you are looping through. (i < array.length) and most importantly adding to i (i ++).

This gives you your for(i = 0; i <array.length; i ++). Remember that you always want to have an end point, break or a way to stop the loop. You also want to make sure you are adding to your variable (i ++) so you can get to your end point. There are also options like break to get you out of a loop if conditions are met. For loops won't go back to zero unless you prompt it too. However it also won't stop unless you tell it to and you will know when that happens cause your browser will freeze.