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 Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perform: Traversing Elements with querySelector

Alex Lowe
Alex Lowe
15,147 Points
Posted by Alex Lowe
Alex Lowe
15,147 Points

Bind list item events not showing up in my console.

When I go to the preview, the console log for the bindTaskEvents ("bind list item events") function isn't there. And nothing shows up in the console when I click on the edit button, delete button, or checkbox. I've been over it a few times and can't quite see what I've done wrong.

Here's my code:

var taskInput = document.getElementById("new-task");
var addButton = document.getElementsByTagName("button")[0];
var incTaskHolder = document.getElementById("incomplete-tasks");
var compTaskHolder = document.getElementById("completed-tasks");

//Add a new task

var addTask = function(){
  console.log("Add task...");
  //when button is pressed, 
     //create a new list item with the text from #newtask
        //input (checkbox)
        //label
        //input(text)
        //button.edit
        //button.delete
        //each element will need to be modified and appended

}




//Edit an existing task
var editTask = function(){
   console.log("Edit task...");
}
   //when the edit button is pressed
     //if the class pf parent is .editmode
        //switch from edit mode
        //label text become the input's 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 parent list item from the ul


//mark a task as complete
var taskComp = function(){
  console.log("Completed task...");
}
    //when the checkbox is checked
      //append the task list itm to the #completedtasks 


//mark a task as incomplete
var taskInc = function(){
  console.log("incompleted task...");
  //when the checkbox is unchecked
      //append the task list itm to the #incompletedtasks 

}

var bindTaskEvents = function(taskListItem, checkBoxEventHandler){
  console.log("bind list item events...");
  //select li'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 deltask to del button
  deleteButton.onclick = deleteTask;
    //bind CBEH to check box
  checkBox.onchange = checkBoxEventHandler;

 }


//Set the click-handler to the addTask function

addButton.onclick = addTask;


//cycle over inctaskholder ul ils
for(var i = 0; i > incTaskHolder.children.length; i++){
   //bind events to list item's children
  bindTaskEvents(incTaskHolder.children[i], taskComp);
}


//cycle over comptaskholder ul ils
for(var i = 0; i > compTaskHolder.children.length; i++){
   //bind events to list item's children
  bindTaskEvents(compTaskHolder.children[i], taskInc);
}
Marcus Parsons
Marcus Parsons
15,719 Points

Hiya Alex Lowe,

Before I take a good look at your code, I went ahead and edited your comment so that the code you posted would render. You can take a look at the Markdown Cheatsheet, refer to the following image, or you can edit your post and see the revision:

code

2 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

Alex, I can see now why your console.log statement isn't firing off. In your for statement, you need to change the > to a < sign. The problem is that i is starting at 0 but then you're making a test to see whether it's greater than the length of the children received from compTaskHolder or incTaskHolder and it's returning false right away, which is not letting it go through the for loop like you want.

Marcus Parsons
Marcus Parsons
15,719 Points

An even more efficient way of doing those for loops is doing them like so:

for (var i in incTaskHolder){
  bindTaskEvents(incTaskHolder.children[i], taskComp);
}

for (var i in compTaskHolder) {
  bindTaskEvents(compTaskHolder.children[i], taskInc);
}

It's just a little shorter version of doing this:

for(var i = 0; i < incTaskHolder.children.length; i++){
  bindTaskEvents(incTaskHolder.children[i], taskComp);
}

for(var i = 0; i < compTaskHolder.children.length; i++){
  bindTaskEvents(compTaskHolder.children[i], taskInc);
}
Alex Lowe
Alex Lowe
15,147 Points
Alex Lowe
Alex Lowe
15,147 Points

Thanks, I missed that. And thanks for the advice about the backticks. I'll try out that "For in" loop.

Marcus Parsons
Marcus Parsons
15,719 Points

Anytime, Alex! If you get stumped on anything else, don't hesitate to post back here or make a new question. Happy Coding!