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

Posted by Jeff R.
Jeff R.
563 Points

Undefined is not a function? (querySelector)

It's claiming that querySelector is not a function in this function:

var bindTaskEvents = function(taskListItem, checkboxEventHandler) {
  console.log("Bind list item events");
      //select taskListItem'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;
      //bind deleteTask to delete button
  deleteButton.onclick = deleteTask;
      //bind checkboxEventHandler to the checkbox
  checkBox.onchange = checkboxEventHandler;
}

What's the problem?

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Jeff,

Fixed markdown for the posted code. If you're curious about how to add markdown like this on your own, checkout this thread on posting code to the forum . Also, there is a link at the bottom called Markdown Cheatsheet that gives a brief overview of how to add markdown to your posts.

Cheers!

2 Answers

Ria Carmin
PLUS
Ria Carmin
Courses Plus Student 11,848 Points
Ria Carmin
Ria Carmin
Courses Plus Student 11,848 Points

What are you passing for taskListItem and checkboxEventHandler? If you call bindTaskEvents with no arguments, it will return an error, because your taskListItem is empty and has no methods.

bindTaskEvents();
//jQuery-Playground.html:18 Bind list item events
//jQuery-Playground.html:20 Uncaught TypeError: Cannot read property 'querySelector' of undefined

You would need to write something like this to loop through your li 's:

//Cycle over incompletedTasksHolder ul list items
for (var i = 0; i < incompletedTasksHolder.children.length; i++) {
    bindTaskEvents(incompletedTasksHolder.children[i], taskComplete);
}

//Cycle over completedTasksHolder ul list items
for (var i = 0; i < completedTasksHolder.children.length; i++) {
    bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}

This way incompletedTasksHolder.children[i] (li element the loop is on) would be passed to taskListItem, and taskComplete or taskInomplete functions would be passed to checkboxEventHandler.

Rishit Shah
Rishit Shah
4,975 Points
Rishit Shah
Rishit Shah
4,975 Points

Hi was facing the same issue. the reason why my code was not working was that i had a "." in between children and [i] meaning i had written children.[i] instead of children[i].So probably your error may be inside the loop or somewhere other than the editor is telling you. However i saw your code and could not find any errors. Here's my code working perfectly fine. 

var taskInput = document.getElementById("new-task");// new task
var addButton = document.getElementsByTagName("button")[0];// button
var incompleteTasksHolder = document.getElementById("incomplete-tasks");//incomplete-tasks
var completedTasksHolder = document.getElementById("completed-tasks");// complete tasks
//add tasK
var addTask = function(){
  console.log("add");
  // when button pressed
  //create a new list item with text form #new-task
    //create checkbox
    //create label 
    //create text
    //button.edit
    //button.delete
    //each elements needs modified and append
}

//edit existing task
  var editTask = function(){
    console.log("edit")
  //when edit button is pressed
    //if class of parent is .editMode
      //switch from edit mode
      //label text becomes input value
    //else
      // switch to edit mode if not in it
      //input value is labels text
    //toggle editmode
  }

//delete an existing task
var deleteTask = function(){
  console.log("delete")
  //on press delete
  //remove parent list item from the ol
}

//mark a task as complete
var taskComplete = function(){
    console.log("complete")
  //checkbox checked
    //append task to #complete-task
}
//mark a task as incomplete
var taskIncomplete = function(){
   console.log("incomplete")
  // checkbox is unchecked
  //append to incomplete task
}
var bindTaskEvents = function(taskListItem , checkBoxEventHandler){
  console.log("bind");
  //select its 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;
    //bind deleteTask to deleteButton
      deleteButton.onclick = deleteTask
    //bind checkBoxEventHandler to checkbox
      checkbox.onchange = checkBoxEventHandler;
}
// set the click handler to the add task function

  addButton.onclick = addTask;
// no () put across addTask as it will call the function right there. not putting brackets will call it on clickeing button

// cycle through incompleteTasksHolder ul list items
  for (var i = 0; i<incompleteTasksHolder.children.length; i++){
    //bind events to list items children selector(taskCompleted)    
    bindTaskEvents(incompleteTasksHolder.children[i], taskComplete);
  }

// cycle through completeTasksHolder ul list items
  for (var i = 0; i<completedTasksHolder.children.length; i++){
   //bind events to list items children selector(taskIncompleted)
    bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
  }

If you find a difference or error please let me know. Hope it helps