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 trialKeith Corona
9,553 PointsInteraction 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
9,553 PointsThe screwed up part came from
var addTask = (){}
where function
was omitted
Martin Cornejo Saavedra
18,132 PointsThe id property must be in the html code, in order to be called from the javascript. Can you show the index.html?
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>
Martin Cornejo Saavedra
18,132 PointsAnd the app.js code?
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
18,132 PointsThe app.js has no interactivity. It does nothing, you have to add the event handlers as the video suggest.
Keith Corona
9,553 Pointsas 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
12,829 PointsDid you ever get this resolved? I still am getting 'TypeError: incompleteTasksHolder is null.'