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

Cannot get "editTask" to log to the console

I cannot get "editTask" function to log to the console. All the other functions work fine. I've checked it about a half dozen times and cannot figure out why only that function won't work. If someone could help me out I'd appreciate it. Thanks!

var taskInput = document.getElementById("new-task"); //newtask
var addButton = document.getElementsByTagName("button")[0]; //first button
var incompleteTasksHolder = 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 is pressed
  // Create a new list item with the text from #new-task:
    //input checkbox
    //label
    //input (text)
    //button.edit
    //button.delete
    //Each elements, needs modified and appended
}


//edit an existing task
var editTask = function() {
  console.log("Edit Task...");
  //When edit button is pressed
    //if the class of the parent is .editMode
      //Switch from .editMode
      //label text become 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 Delete button is pressed
    //remove the parent list item from the ul
}
//Mark a task as complete
var taskCompleted = function() {
  console.log("Complete Task...");
  //When checkbox is checked
    //Append the task list item to the #completed-tasks
}

//Mark a task as incomplete
var taskIncomplete = function() {
  console.log("Incomplete Task...")
  //When the checkbox is unchecked
    //append to #incompleted-tasks
}

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
  console.log("Bind list item events");
  var checkBox = taskListItem.querySelector("input[type=checkbox]");
  var editButton = taskListItem.querySelector("button.edit");
  var deleteButton = taskListItem.querySelector("button.delete");

  editButton.onlick = editTask;

  deleteButton.onclick = deleteTask;

  checkBox.onchange = checkBoxEventHandler;
}

//Set the clickhandler to the addTask function
addButton.onclick = addTask;

//cycle overthe incompleteTaskHolder ul list items
for(i = 0; i < incompleteTasksHolder.children.length; i++) {
     //bind event to list item's children (taskCompleted)
    bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}

//cycle over the completedTaskHolder ul list items
for(i = 0; i < completedTasksHolder.children.length; i++) {
      //bind event to list item's children (taskIncomplete)
  bindTaskEvents(completedTasksHolder.children[i], taskIncomplete)
}```

2 Answers

It is hard to see a problem without whole context (html). Would you provide environment of this code?

Hey Tel,

Not sure if you've found the answer yet, but on line 59, you're trying to bind the editTask() function to the 'onlick' event, which is completely different from the desired 'on*c*lick' event ;)

These sorts of things happen to me all the time.