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 trialAlex Lowe
15,147 PointsBind 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);
}
2 Answers
Marcus Parsons
15,719 PointsAlex, 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
15,719 PointsAn 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
15,147 PointsThanks, I missed that. And thanks for the advice about the backticks. I'll try out that "For in" loop.
Marcus Parsons
15,719 PointsAnytime, Alex! If you get stumped on anything else, don't hesitate to post back here or make a new question. Happy Coding!
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsHiya 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: