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

kevin wagner
PLUS
kevin wagner
Courses Plus Student 21,913 Points

Receiving and 'editButton is not defined' error

Everything seems to be working fine so far for me on this project, except that I've been unable to set the value for the editButton variable. I've used the same DOM methods that Andrew uses in the video, however when I use taskListItem.querySelector("button.edit") to grab the button element with the class 'edit' from the document and assign it to the variable editButton, I'm coming up with an error. I've checked and double checked that the appropriate button elements have the class 'edit' and they do. Here is my javascript:

var taskInput = document.getElementById("new-task"); //new-task
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 the 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 the Edit button is pressed
    //if the class of the parent is .editNode
      //Switch from .editMode
      //Label text bcomes the input's value
    //else
      //Switch to .editMode
      //input value becomes the labe's text

    //Toggle .editMode on the parent
}

//Delete and existing task
var deleteTask = function() {
   console.log("Delete Task...");
  //When the delet button is pressed
    //Remove the paent list item from the ul
}

//Mark a task as complete
var taskCompleted = function() {
   console.log("Task complete...");
   //When the checkbox is checked
    //Append the task list item to the #completed-tasks
}

//Mark a task as incomplete
var taskIncomplete = function() {
   console.log("Task Complete...");
  //When the chckbox is unchecked
    //Append the task list itme to the #incomplete-tasks
}

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
  console.log("Task incomplete...");
  //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
    //bind deleteTask to the delete button
    //bind checkBoxEventHandler to the checkbox
}


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

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

//bind editTask to edit button
editButton.onclick = editTask;

//bind deleteTask to edit button
deleteButton.onclick = deleteTask;

//bind checkBoxEventHandler to checkbox
checkBox.onchange = checkBoxEventHandler;

//Set the click handler to the addTask function
addButton.onclick = addTask;

'''

Ha! I think I corrected it - I was assigning the onclick event handlers outside of the bindTaskEvents function, so the handlers were not getting assigned at each iteration during the for loops as they should have been!

1 Answer

kevin wagner
PLUS
kevin wagner
Courses Plus Student 21,913 Points

So it looks like I left the variable assignments outside of the bindTaskEvents function, and because of that they were not being assigned correctly to during each iteration of the 'for' loops