Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Jason Larkin
Jason Larkin
13,970 Points

Interactive Pages with Javascript project not working

I think that I followed the tutorials to the letter, but there might be something I might have missed. Thanks for looking. Here is the js:

var taskInput = document.getElementById("new-task"); //new task
var addButton = document.getElementsByTagName("button")[0]; //first button
var incompleteTasksHolder = document.getElementById("incomplete-tasks"); //incomplete t
var completedTasksHolder = document.getElementById("completed-tasks"); //completed
//Add a new task
var createTaskElement = function(taskString) {
//Create a new list item with the text from #new-task:
  var listItem = document.createElement("li");
   //Input (checkbox)
  var checkBox = document.createElement("input");
   //label
  var label = document.createElement("label");
   //input (text)
  var editInput = document.createElement("input");
   //button.edit
  var editButton = document.createElement("button");
   //button.delete
  var deleteButton = document.createElement("button")
   //Each elements, needs modified and appended  
  listItem.appendChild(

  )
  listItem.appendChild(checkbox); 
    listItem.appendChild(label);
    listItem.appendChild(editInput);
    listItem.appendChild(editButton); 
    listItem.appendChild(deleteButton); 
   //When a button is pressed
 incompleteTasksHolder.appendChild(listitem);
   //You create a task

}
var ajaxRequest = function() {
  console.log("AJAX request");
}

      addButton.addEventListener("click",addTask);
       addButton.addEventListener("click",addTask);
//Edit an existing task
var editTask = function() {
  console.log("Edit task...");
    var listItem = this.parentNode;
    var editInput = listItem.querySelector("");
    //if the class of the parent is .editMode
    //switch from .editMode

//Delete an existing task
listItem.classList.toggle(editMode");

//Mark a task as complete
//Mark a task as incomplete

var bindTaskEvents=function(taskListItem,checkBoxEventHandler){
}




//cycle over incompleteTaskHolder ul

//Delete an existing task
var deleteTask = function() {
  console.log("Delete task......");
 var listItem = this.parentNode;
 var editInput = listItem.parentNode;

  //Remove the parent list item from the ul
ul.removeChild(listItem);
}
//Mark task as complete
var taskCompleted = function() {
  console.log("complete task...");
   var listItem = this.parentNode;
  completedTaskHolder.appendChild(listItem);
  bindTaskEvents(listItem,taskIncomplete);
  //When the checkbox is checked
  //Append the task list item to the #completed-tasks
}
//Mark task as incomplete
var taskIncomplete = function(){
  console.log("task incomplete...");
  //When the checkbox is unchecked
  //Append the task list item to the #incomplete-tasks
}


var bindTaskEvents = function(taskListItem, checkBoxEventHandler){
  console.log("Bind list item events");
    //select its children
    //bind deleteTask to delete button
    //bind taskCompleted to checkbox
}
//Set the click handler to the addTask function
addButton.onclick=addTask;

    //cycle over incompleteTaskHandler ul list items
for(var i=0; i< incompleteTaskHolder.children.length; i++){ 
  bindTaskEvents(incompleteTaskHolder.children[1], taskCompleted);

    //for each list item
    //bind events to list item's children (taskCompleted)

}  
     //cycle over completeTaskHandler ul list items
    for(var i=0; i< completedTaskHolder.children.length; i++){
    //for each list item
    bindTaskEvents(completedTaskHolder.children[1], taskIncomplete);{
    }
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 90,705 Points

I don't know if this solves the whole problem but one step at a time. :)

listItem.classList.toggle(editMode");  

This line has a string argument that improperly closed.

5 Answers

Sean T. Unwin
Sean T. Unwin
28,660 Points

There are multiple errors here after going over your code more closely. These are on top of the two other errors already reported so those aren't listed here. See below for the errors (The numbers on the left are line numbers):

/*
missing addTask() function <-- not sure if  you missed writing it and not sure exactly what stage you're at

editTask() function is missing closing curly bracket and will need semi-colon after it
^-- place them after the 'listItem.classList.toggle("editMode");' statement

*/

18 missing semi-colon
22 missing semi-colon
32 missing semi-colon
35 missing semi-colon
54 missing semi-colon
69 missing semi-colon
78 missing semi-colon
84 missing semi-colon
92 missing semi-colon

Remember that if you declare a variable, even if it's a function, i.e. using the var keyword, you need to end the statement with a semi-colon. There are actually only a few instances where you don't end with one, such as declaring a function implicitly.

Sean T. Unwin
Sean T. Unwin
28,660 Points

There is a double quote missing.

//Delete an existing task
listItem.classList.toggle(editMode"); // Missing opening quote inside `toggle()`
Jason Larkin
Jason Larkin
13,970 Points

Thank you both; it didn't solve anything but I'm glad you caught it.

Sean T. Unwin
Sean T. Unwin
28,660 Points

What errors, if any are you getting from the Dev Tools console?

Sean T. Unwin
Sean T. Unwin
28,660 Points

You have an opening curly brace inside your last for loop

 //cycle over completeTaskHandler ul list items
    for(var i=0; i< completedTaskHolder.children.length; i++){
    //for each list item
    /* CHECK THE END OF THIS NEXT LINE */
    bindTaskEvents(completedTaskHolder.children[1], taskIncomplete);{ // <-- Right here 
    }
Jason Larkin
Jason Larkin
13,970 Points

Thank you for the heads up, but obviating it hasn't affected the functionality of the program.