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 trialMendel Konikov
5,602 PointsMarking items as complete works but not always vice versa
Code seems to work only partially - can't figure out what's wrong.
After checking box, LI does move to completed but after testing and toggling on and off it does not work anymore.
What am I missing?
TIA!
var taskInput = document.getElementById("new-task"); //new task
var addButton = document.getElementsByTagName("button")[0]; //firstbutton
var incompleteTasksHolder = document.getElementById("incomplete-tasks");
var completeTasksHolder = document.getElementById("completed-tasks");
//Add new task
var createNewTaskElement = function(taskString) {
//create LI
var listItem = document.createElement("li");
//input checkbox
var checkbox = document.createElement("input");
//label
var label = document.createElement("label");
//input (text)
var editInput = document.createElement("input");
//button.edit
var editButton = document.createElement("button");
//button.delete
var deleteButton = document.createElement("button");
//Each element needs full text and to be
//each element appended
listItem.appendChild(checkbox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
return listItem;
}
var addTask = function() {
console.log("Add");
//Create new list item with text from #new-task
var listItem = createNewTaskElement("Some New Task");
//append LI to inclimpletetaskholder
incompleteTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskComplete);
}
//Edit exisiting task
var editTask = function() {
console.log("Edit");
//When edit button pressed
//if parent class is .editMode
//switch from .editmode
//label become input value
//else
//switch to .editmode
//input value become label
//toggle .editMode on parent
}
//Delete existing task
var deleteTask = function() {
console.log("Delete");
//when delete pressed
//remove parent li from ul
var listItem = this.parentNode;
var ul = listItem.parentNode;
ul.removeChild(listItem);
}
//Mark tasks complete
var taskComplete = function() {
console.log("Complete");
//when checkbox is :checked
//append task li to #completed-tasks ul
var listItem = this.parentNode;
completeTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskComplete);
}
//Mark tasks incomplete
var taskIncomplete = function() {
console.log("Incomplete");
//when checkbox unchecked
//append to incomplete tasks
var listItem = this.parentNode;
incompleteTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete);
}
var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
console.log("Bind LIs");
//select children
var checkBox = taskListItem.querySelector("input[type='checkbox']");
var editButton = taskListItem.querySelector("button.edit");
var deleteButton = taskListItem.querySelector("button.delete");
//bind edit
editButton.onclick = editTask;
//bind delete
deleteButton.onclick = deleteTask;
//bind checkbox
checkBox.onchange = checkBoxEventHandler;
}
//Set click handler to addTask function
addButton.onclick = addTask;
//cycle over incomplete UL LI
for ( var i = 0; i < incompleteTasksHolder.children.length; i++ ) {
bindTaskEvents(incompleteTasksHolder.children[i], taskComplete);
//bind events
}
//cycle over complete UL LI
for ( var i = 0; i < completeTasksHolder.children.length; i++ ) {
bindTaskEvents(completeTasksHolder.children[i], taskIncomplete);
//bind events
}
Mendel Konikov
5,602 PointsCan you see now?
2 Answers
Tawanda Musabaika
10,522 PointsHi Mendel, If you haven't found an answer by now or if someone runs into the same problem here is what I noticed from the code you posted. Just looking at this section:
var taskComplete = function() {
console.log("Complete");
//when checkbox is :checked
//append task li to #completed-tasks ul
var listItem = this.parentNode;
completeTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskComplete);
}
//Mark tasks incomplete
var taskIncomplete = function() {
console.log("Incomplete");
//when checkbox unchecked
//append to incomplete tasks
var listItem = this.parentNode;
incompleteTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete)
I noticed you made the taskIncomplete/taskComplete functions call themselves whereas you were supposed to make taskIncomplete call taskComplete and vice versa like below.
try changing your code to
var taskComplete = function() {
console.log("Complete");
//when checkbox is :checked
//append task li to #completed-tasks ul
var listItem = this.parentNode;
completeTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete); //<<<------change here
}
//Mark tasks incomplete
var taskIncomplete = function() {
console.log("Incomplete");
//when checkbox unchecked
//append to incomplete tasks
var listItem = this.parentNode;
incompleteTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskComplete) //<<<------change here
Steven Parker
231,198 PointsSteven Parker
231,198 PointsThis is only part of the code for this project.
To share everything at once, make a snapshot of your workspace and post the link to it here.