listItem is not defined. Code not working. Pls help.

Question

Here is my code. I keep getting 'listItem is not defined'. Help is appreciated.

var taskInput = document.getElementById("new-task");
var addButton = document.getElementsByTagName("button")[0];
var incompleteTasksHolder = document.getElementById("incomplete-tasks");
var completedTasks = document.getElementById("completed-tasks");

  var createNewTaskElement = function(taskString) {

  var listItem = document.createElement("li");
  var checkBox = document.createElement("input");
  var label = document.createElement("label");

  var editInput = document.createElement("input");
  var editButton = document.createElement("button");
  var deleteButton = document.createElement("button");

    checkBox.type = "checkbox";
    checkBox.type = "text";

    editButton.innerText = "Edit";
    editButton.className = "edit";
    deleteButton.innerText = "Delete";
    deleteButton.className = "delete";

    label.innerText = taskString;

    listItem.appendChild(checkBox);
    listItem.appendChild(label);
    listItem.appendChild(editInput);
    listItem.appendChild(editButton);
    listItem.appendChild(deleteButton);
      return listItem;
}

var addTask = function() {

  console.log("Add Task..");
  var listItem = createNewTaskElement("Some New Task");
  incompleteTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskCompleted);
}

var editTask = function() {
  console.log("Edit Task.."); 
}

var deleteTask = function() {
   console.log("Delete Task..");
}

var taskCompleted = function() {
   console.log("Task Completed");
  completedTasks.appendChild(listItem);
  bindTaskEvents(listItem, taskIncomplete);
}

var taskIncomplete = function() {
   console.log("Task Incomplete..");
  incompleteTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskCompleted);
}

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.onclick = editTask;
  deleteButton.onclick = deleteTask;
  checkBox.onchange = checkBoxEventHandler;
}

addButton.onclick = addTask;

for (var i = 0; i < completedTasks.children.length; i++) {
   bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}


for (var i = 0; i < completedTasks.children.length; i++) {
  bindTaskEvents(completedTasks.children[i], taskIncomplete);
}

Answer 1 · 2015-12-09T10:21:55Z

December 9, 2015 10:21am

Inside the functions: taskCompleted and taskIncomplete you reference listItem, but it does not exist within the scope of those functions.

var taskCompleted = function () {
  console.log("Task Completed");
  completedTasks.appendChild(listItem); //referenced listItem, but it's not in this scope.
  bindTaskEvents(listItem, taskIncomplete);
}
var taskIncomplete = function () {
  console.log("Task Incomplete..");
  incompleteTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskCompleted);
}

Either pass listItem to your functions or declare it from inside.

This is from a code project within one of the javascript courses right? I have a feeling you may have skipped a step somewhere.

Welcome to the Treehouse Community

Looking to learn something new?

Brian Mendez

Brian Mendez

listItem is not defined. Code not working. Pls help.

1 Answer

jobbol

jobbol