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 trialJonathan Leon
18,813 Pointson click my tasks wont move to the other list, yet it shows no errors in the js console, can you look into my code plz?
'''/// USER INTERACTION DOESNT PROVIDE DESIRED RESULTS
/// SOLUTION: ADD INTERACTIVITY SO THE USER CAN MANAGE DAILY TASKS
var taskInput = document.getElementById("new-task") ; var addButton = document.getElementsByTagName("button")[0]; var incompleteTasksHolder = document.getElementById("incomplete-tasks") ; var completeTasksHolder = document.getElementById("completed-tasks") ;
//NEW TASKS LI ITEM
var createNewTaskElement = function(taskString) {
///Create list item var listItem = document.createElement("li") ; ///CREATE AN INPUT WITH THE CHECKBOX var checkBox = document.createElement("input"); ///checkbox ///CREATE A LABEL var label = document.createElement("label"); ///CREATE AN INPUT (TEXT) var textInput = document.createElement("input"); ///text
///CREATE A BUTTON (CLASS = EDIT)
var editButton = document.createElement("button"); ///edit
///CREATE A BUTTON (CLASS = DELETE)
var deleteButton = document.createElement("button"); ///delete
///EACH ELEMENT NEEDS MODIFIED AND
//APPENDED
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(textInput);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
return listItem; }
// ADD A NEW TASK
var addTask = function (){
console.log("addTask...");
//CREATE A NEW LIST ITEM WITH THE TEXT FROM #NEW-TASK
var listItem = createNewTaskElement("some new task"); // Append list item to incompleteTasksHolder
incompleteTasksHolder.appendChild(listItem); bindTaskEvents(listItem, taskIncomplete);
};
// EDIT EXISTING TASK
var editTask = function (){
console.log("edittask...");
}; //WHEN EDIT BUTTON IS PRESSED //IF THE CLASS OF PARENT ELEMENT IS EDITMODE //SWITCH FROM EDITMODE //LABEL TEXT BECOMES INPUT'S VALUE //ELSE //SWITCH TO EDITMODE //INPUT VALUE BECOMES LABEL TEXT
//(TOGGLE EDITMODE ON PARENT)
// DELETE EXISTING TASK
var deleteTask = function (){
console.log("deletetask...");
}; //WHEN DELETE BUTTON IS PRESSED //REMOVE THE ELEMENT'S PARENT (LI ITEM > BUTTON)
// MARK A TASK AS COMPLETE
var taskCompleted = function (){
var listItem = this.parentNode;
completeTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
};
// WHEN CHECKED BOX IS CHECKED, APPEND THE LIST ITEM TO THE COMPLETED UL AND REMOVE FROM INCOMPLETE UL
// MARK A TASK AS INCOMPLETE
var taskIncomplete = function() {
console.log("taskIncomplete...");
var listItem = this.parentNode;
incompleteTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete);
// WHEN CHECKED BOX IS UNCHECKED, APPEND THE LIST ITEM TO THE UNCOMPLETED UL AND REMOVE FROM COMPLETED UL
};
//bind task events
var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
console.log("bindlistevents");
//select tasklistitem'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
editButton.onclick = editTask;
//bind deleteTask to delete button
deleteButton.onclick = deleteTask;
//bind checkBoxEventHandler to checkbox
checkBox.onchange = checkBoxEventHandler;
};
//Set the click handler to the addTask function
addButton.onclick = addTask;
//cycle over the ul incomplete li items,
for (var i = 0 ; i < incompleteTasksHolder.children.length ; i +=1) {
bindTaskEvents(incompleteTasksHolder.children[i],taskIncomplete);
}
//cycle over the ul completed li items, //bind events to li items children (taskIncomplete)
for (var i = 0 ; i < completeTasksHolder.children.length ; i +=1) {
bindTaskEvents(completeTasksHolder.children[i],taskCompleted);
}'''
2 Answers
Marcus Parsons
15,719 PointsHi Jonathan,
The problem is in both of your bottom for loops that are binding tasks to each list item in each set of tasks. You need to bind the function that is the opposite of the current task holder. For example, in your first for loop, the function to be bound should be "taskCompleted" not "taskIncomplete" because when you click the checkbox, you want the list item to move to the other task holder. So, you need to switch out the functions you are using to bind to the checkboxes:
//cycle over the ul incomplete li items,
for (var i = 0 ; i < incompleteTasksHolder.children.length ; i +=1) {
//changed to taskCompleted
bindTaskEvents(incompleteTasksHolder.children[i],taskCompleted);
}
//cycle over the ul completed li items, //bind events to li items children (taskIncomplete)
for (var i = 0 ; i < completeTasksHolder.children.length ; i +=1) {
//changed to taskIncomplete
bindTaskEvents(completeTasksHolder.children[i],taskIncomplete);
}
Jonathan Leon
18,813 Pointsfacepalm
Thanks man! You're always there for me, wanted to look you up on the "ask for answer" list and there you appeared! have a great week!
Marcus Parsons
15,719 PointsI won't be on the forums or on Treehouse at all after today, though, unfortunately. I have been paying Treehouse for far too long just to answer questions on the forums. I love helping out, but it doesn't make fiscal sense for me to pay to do it, if you know what I mean. I wish you the best, Jonathan, and good luck in your coding and life journey! =)
Marcus Parsons
15,719 PointsBtw, if you have a Twitter account, you can follow me on there and I'll follow you back. https://twitter.com/marcusaparsons You can also email me if you wish: marcus@marcusparsons.com. I've been helping a few people from the forums via email :)
Jonathan Leon
18,813 PointsSure thing! thanks Marcus! I'll keep in touch.