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 trialFloyd Orr
11,723 PointsAny idea why my add item button does not add anything to list?
I have been trying to find why the add button won't add anything. It has an event handler attached according to console.log . I have been at it for 4 hours. I don't see whats wrong. Please help. Thank you.
//Problem user interaction do not provide results
// add interactivity so user can manage daily task
var taskInput = document.getElementById("new-task");//new-task
var addbutton = document.getElementsByTagName("button")[0];//first button
var incompleteTaskHolder = document.getElementById("incomplete-tasks");//incomplet-task
var completedTaskHolder = document.getElementById("completed-tasks");//completed-task
//new task list item
var createNewTaskElement = function(taskString){
//create List Item
var listItem = document.createElement("li");
//input (checkbox)
var checkBox = document.createElement("input");//input checkbox
var label = document.createElement("label");// text
// input (text)
var editInput = document.createElement("input");//text
//button.edit
var editButton = document.createElement("button");
//button.delete
var deleteButton = document.createElement("button");
//Each elements, needs modifying
//each element needs appending
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
//edit an existing task
return listItem
}
//add a new task
var addTask = function() {
console.log("add to Task works...");
//creat a new list item with the text from #new-task:
var listItem = createNewTaskElement("Some New Task");
//append listItem incompleteTaskholder
incompleteTaskHolder.appendChild(listItem);
}
//Edit an existing task
var editTask = function() {
console.log("edit task....");
//when the edit button is pressed
// if the class of the parend is editmode
//switch from .editMode
//label text bcome teh inpu valu
//else
//seitch to editMode
//input value becomes the labels text
//Toggle editMode on the parent
//delete an existing task
}
var deleteTask = function() {
console.log("delete task");
//when delete button is pressed
//remove parrent item from ul
//mark a task as complete
}
var taskCompleted = function () {
console.log(" taskCompleted");
//when the checkbox is checked
//append the task list item to the completed=tasks
//mark a task as incomplete
//when the checkbox is unchecked
}
var bindTaskEvents = function (taskListItem, checkBoxEventHandler) {
console.log("Bind list item events");
//select it's children
var checkBox = taskListItem.querySelector("input[type=checkbox]");
var editButton = taskListItem.querySelector("button.edit");
var deleteButton =taskListItem.querySelector("button.delete");
//bind editTask to edit button
//bind deleteTask to the delete button
//bind checkBoxEventHandler to checkbox
checkBox.onchange = checkBoxEventHandler;
}
//set event handler to addTask Function
addbutton.onclick = addTask;
//cycle over incompleteTaskHolder ul list item when checked ad to other list
for (var i = 0; i < incompleteTaskHolder.children.length; i++) {
//bind events to list items children (taskcompleted)
bindTaskEvents(incompleteTaskHolder.children[i], taskCompleted);
}
//cycle over completedTaskHolder ul list items
for (var i = 0; i < completeTaskHolder.children.length; i++) {
//bind events to list items children (taskcomplete)
bindTaskEvents(completeTaskHolder.children[i], taskIncomplete);
}
1 Answer
Marcus Parsons
15,719 PointsHey Floyd,
You still have a ways to go with the program. You should first go back through the video as you are missing some things in your code. And after you've added in everything, keep following along with the instructor because the code is incomplete even after you've added in what you're missing.