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 trialandrew schoenherr
8,427 Pointsline 80 error now. please help.. console error
//Problem user interaction doesnt provide desired results
//solution- add ineractivity so user can manage daily tasks
var taskInput = document.getElementById("new-task");//new-task
var addButton = document.getElementsByTagName("button")[0]; //first button
var incompleteTaskHolder = 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 button pressed
//Create a new list item with text from #new-task
//input checkbox
//label
//input text
//button.edit
//button.delete
//each element needs to be modified and appended
}
//Edit an exsisting task
var editTask = function() {
console.log("Edit task...");
//when the edit button is pressed
//if the class of the parent is .editmode
//Switch from .editmode
//label text becomes the input value
//else
//switch to .editmode
//input value becomes label text
//toggle .editmode
}
//Delete exsisiting task
var deleteTask = function() {
console.log("Delete task...");
//when delete button is pressed
//remove the parent list item from the ul
}
//Mark a task complete
var taskComplete = function() {
console.log("Complete task...");
//when the checkbox is checked
// append the task list item from completed
}
//Mark task as incomplete
var taskIncomplete = function() {
console.log("Incomplete task...");
//when the checkbox is unchecked
//append the task list item to the #incompleted-tasks
}
var bindTaksEvents = function(taskListItem, checkBoxEventHandler) {
console.log("Bind list item events");
//select it'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;
//bild deleteTaks to delete button
deleteButton.onclick = deleteTask;
//bind checkBoxEventHandler to check button
checkBox.onchange = checkBoxEventHandler;
}
//Set the click handeler to the addTask function
addButton.onclick = addTask;
//cycle over incomplete tasks holdermul list items
for(var i = 0; i < incompleteTaskHolder.children.length; i++) {
//bind events to list items children (taskComplete)
bindTaksEvents(incompleteTaskHolder.children[i], taskComplete);
}
//cycle over completetasks holdermul list items
for(var i = 0; i < completedTaskHolder.children.length; i++){
//bind events to list items children (taskInomplete)
bindTaksEvents(completedTasksHolder.children[i], taskIncomplete);
}
1 Answer
Jason Anders
Treehouse Moderator 145,860 PointsOkay... In you opening var declarations:
- incompleteTaskHolder (is singular)
- completedTasksHolder (is plural)
This is not a problem until you mix that up when using the variables.
//cycle over completetasks holdermul list items for(var i = 0; i < completedTaskHolder.children.length; i++){
//bind events to list items children (taskInomplete)
bindTaksEvents(completedTasksHolder.children[i], taskIncomplete);
In your 'for' conditions, you use the singular (when it should be plural).
In your function call you do use the plural so that's fine. Just fix the one line to be for(var i = 0; i < completedTasksHolder.children.length; i++) {
and that should do it. :)