Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perform: Traversing Elements with children

Keith Corona
Keith Corona
9,553 Points

Interaction with JavaScript, returned undefined

While following along with Chalkey, I cannot get anything to be recognized in the JS console. Each time I put in an element (ie. taskInput), I get "undefined". Why?

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

3 Answers

Keith Corona
Keith Corona
9,553 Points

The screwed up part came from

var addTask = (){}

where function was omitted

Martin Cornejo Saavedra
Martin Cornejo Saavedra
18,132 Points

The id property must be in the html code, in order to be called from the javascript. Can you show the index.html?

Keith Corona
Keith Corona
9,553 Points
<!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">    
  </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>
Keith Corona
Keith Corona
9,553 Points
//User interaction doesn't provide desired results

//Solution: add interactivity so the user can manage daily tasks

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 = () {
  console.log("Add task..");
  //When the button is pressed
  //Create a list item with the text from #new-task:
    //input checkbox
    //label
    //input (text)
    //button.edit
    //button.delete
    //Each of these elements need to be modified and appended
  }

//Edit an existing task
var editTask = function() {
  console.log("Edit task..");
  //When edit button is pressed
    //If class of 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 pressed
    //Remove parent list item from the ul
}

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

//Mark a task as incomplete
var taskIncomplete = function() {
  console.log("task incomplete..");
  //When checkbox unchecked
    //Append the task li to #incomplete-tasks
}


//Set click handler to the addTask function
Martin Cornejo Saavedra
Martin Cornejo Saavedra
18,132 Points

The app.js has no interactivity. It does nothing, you have to add the event handlers as the video suggest.

Keith Corona
Keith Corona
9,553 Points

as in setting a click handler to addTask? I did that and still nothing. My problem stem from some of the first steps of these videos with Chalkey when he tests the JS in the console. Mine doesn't register.

Christopher Johnson
Christopher Johnson
12,829 Points

Did you ever get this resolved? I still am getting 'TypeError: incompleteTasksHolder is null.'