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

I 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

Hey 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.

would 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++){

I 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 of bindTaksEvents [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:

//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
}

//changed Taks to Task correct spelling and corrected the references to it in the for loop
var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
  //changed to console.log
  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 deleteTask 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)
  bindTaskEvents(incompleteTaskHolder.children[i], taskComplete);
}

//cycle over completetasks holdermul list items
//changed completeTaskHolder to completedTasksHolder
for(var i = 0; i < completedTasksHolder.children.length; i++){

    //bind events to list items children (taskIncomplete)
  bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}

Marcus 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!

Copy 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.

Hugo Paz
Hugo Paz
15,622 Points

Hi 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.

Thanks! 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++){

Thank 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