I cant get my bindTasksEvents to print to the console

Question

Hello!

I am following the video lectures, when I run this code below, the bindTasksEvents() is supposed to print to the console, the following: Bins List items events And when I click on Paybills, I am supposed to see printed in the console: Task complete

BUT instead, I get this message in the console

Uncaught TypeError: Cannot set property 'onclick' of undefined try.html:63 bindTaskEvents (); Bind list item events try.html:46 Uncaught TypeError: Cannot read property 'querySelector' of undefined

How can I make my bindTasksEvents to work?

<!DOCTYPE html>
<html>
  <head>
    <title>Todo App</title>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8"> 
    <script>
    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...");
  //Create a new list item with the text from #new-task:
  }

//Edit an existing task
var editTask = function() {
  console.log("Edit task...");
}

//Delete an existing task
var deleteTask = function() {
  console.log("Delete task...");
  }

//Mark a task as complete
var taskCompleted = function() {
  console.log("Task complete...");



}

//Mark a task as incomplete
var taskIncomplete = function() {
  console.log("Task incomplete...");


}

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");


  editButton.onclick = editTask;


  deleteButton.onclick = deleteTask;


  checkBox.onchange = checkBoxEventHandler;
}


addButton.onclick=addTask;


for(var i = 0; i < incompleteTasksHolder.children.length; i++) {

  bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}


for(var i = 0; i < completedTasksHolder.children.length; i++) {

  bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}





    </script>
  </head>
  <body>
    <div class="container">
      <p>
        <label for="new-task">Add Item</label><input id="new-task" type="text"><button>Add</button>
      </p>

      <h3>Todo</h3>
      <ul id="incomplete-tasks">
        <li><input type="checkbox"><label>Pay Bills</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
        <li class="editMode"><input type="checkbox"><label>Go Shopping</label><input type="text" value="Go Shopping"><button class="edit">Edit</button><button class="delete">Delete</button></li>

      </ul>

      <h3>Completed</h3>
      <ul id="completed-tasks">
        <li><input type="checkbox" checked><label>See the Doctor</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
      </ul>
    </div>

    <script type="text/javascript" src="js/app.js"></script>

  </body>
</html>

Answer 1 · 2014-11-04T03:13:07Z

November 4, 2014 3:13am

Orange;

Are you adding your JavaScript directly in your HTML as posted or in a separate linked file as in the video project and in the <script> tag you have at the bottom of your HTML post?

Ken

Welcome to the Treehouse Community

Looking to learn something new?

orange sky

orange sky

I cant get my bindTasksEvents to print to the console

1 Answer

Ken Alger

Ken Alger

orange sky

orange sky