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 PointsI am getting an error in my console and cant seem to fix it
Console error is line 70.. I have this copied as per the lesson at least I think
//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 newTask = 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) {
consloe.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 < completeTaskHolder.children.length; i++){
//bind events to list items children (taskInomplete)
bindTaksEvents(completedTasksHolder.children[i], taskIncomplete);
}
3 Answers
Marcus Parsons
15,719 PointsHey Andrew,
You're getting that error because you have the function that should be named addTask
as newTask
. If you rename that first function to addTask
, you'll be in the right with your code. You could also change the event handler for the onclick
of addButton
to be newTask
but Andrew uses the function addTask
in future videos, so that is why I suggest that first change of renaming your newTask
function.
Hugo Paz
15,622 PointsHi Andrew,
It seems you dont have AddTask defined, maybe you renamed it to newTask at the start of the code?
addButton.onclick = addTask;
This fails because addTask is not defined.
andrew schoenherr
8,427 PointsThanks! check line 80 i have changed it to completed as it was complete but still does not pass for(var i = 0; i < completedTaskHolder.children.length; i++){
andrew schoenherr
8,427 PointsThank you! That has fixed it. However I am now getting one on line 80 completedTaskHolder not defined. I double checked the var on this and am not seeing it
andrew schoenherr
8,427 Pointsandrew schoenherr
8,427 Pointswould you look at line 80 please as well? i saw a error as it was complete and completed.. however fixed its still not working
for(var i = 0; i < completedTaskHolder.children.length; i++){
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsI found a few more issues after going over the code more carefully. The main issue that you're getting on line 80 is that you have "completeTaskHolder" when it should be "completedTasksHolder". Another issue is your
console.log
command inside ofbindTaksEvents
[sic]. It is currently misspelled, and so you just have to change it to "console". And you also have bind task events events misspelled but there are no errors because its properly referenced. Here is the app.js:andrew schoenherr
8,427 Pointsandrew schoenherr
8,427 PointsMarcus thanks! I did already see those other issues in the console and fixed them. I tried fixing the complete to completed but it still failed.. not sure where I was missing. I appreciate the time you spent going over it! Thanks!
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsCopy what I posted for you here and replace it with your current "app.js". I have my own version of the to do list saved in a workspace, and so the code I posted for you, I tested out in my own workspace before posting so that I know it works.