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 children

Keith Corona
Keith Corona
9,553 Points
Posted by 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
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
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
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
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
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
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
Christopher Johnson
Christopher Johnson
12,829 Points

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