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
Michael Ross
11,204 PointsTask list item not moving back to 'completed' list holder
I have created the todo list application following the Interactive JavaScript Course. I have come across a problem where my list item will move from incomplete to the completed list holder after I have checked the checkbox. I then select the checkbox again, which will move it back up to the incomplete list holder fine. When I try to use the checkbox to move the same list item back to the completed list holder a second time round it doesn't work.
So basically, with my code I can only move the list item from incomplete to complete and then back to incomplete once over - it won't allow this action to be carried out a second time round.
var taskInput = document.getElementById("new-task"); //new-task
var addButton = document.getElementById("add-button"); //first button
var incompleteTasksHolder = document.getElementById("incomplete-tasks"); //incomplete-tasks
var completedTasksHolder = document.getElementById("completed-tasks"); //completed-tasks
//New task list item
var createNewTaskElement = function(taskString) {
var listItem = document.createElement("li");
var checkBox = document.createElement("input");
var label = document.createElement("label");
var editInput = document.createElement("input");
var editButton = document.createElement("button");
var deleteButton = document.createElement("button");
//Each element needs modifying
checkBox.type = "checkbox";
editInput.type = "text";
editButton.innerText = "Edit";
editButton.className = "edit";
deleteButton.innerText = "Delete";
deleteButton.className = "delete";
label.innerText = taskString;
//each element needs appending
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
return listItem;
};
//Delete 'add item' inner-text
var deleteItemText = function () {
taskInput.value = "";
};
var ChangeAddButtonClass = function () {
if(taskInput.value == "Input text before adding" || taskInput.value == "") {
addButton.classList.add("error-hover");
}else {
addButton.classList.remove("error-hover");
}
};
//Add a new task
var addTask = function() {
//Create a new list item with the text from #new-task:
if(taskInput.value) {
if(taskInput.value != "Input text before adding") {
var listItem = createNewTaskElement(taskInput.value);
//Append listItem to the incompleteTasksHolder
incompleteTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
}
taskInput.value = "";
}
};
//Edit an existing task
var editTask = function() {
var listItem = this.parentNode;
var editInput = listItem.querySelector("input[type=text]");
var label = listItem.querySelector("label");
var editButton = listItem.querySelector("button.edit");
var containsClass = listItem.classList.contains("editMode");
//If the class of the parent is .editMode
if(containsClass) {
//Switch from .editMode
//label text become the input's value
editButton.innerText = "Edit"
label.innerText = editInput.value;
} else {
//Switch to .editMode
//input value becomes the label's text
editButton.innerText = "Save"
editInput.value = label.innerText;
}
//Toggle .editMode on the listItem
listItem.classList.toggle("editMode");
};
//Delete an existing task
var deleteTask = function() {
var listItem = this.parentNode;
var ul = listItem.parentNode;
//Remove the parent list item from the ul
ul.removeChild(listItem);
};
//Mark a task as complete
var taskCompleted = function() {
//Append the task list item to the #completed-tasks
var listItem = this.parentNode;
completedTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete);
};
//Mark a task as incomplete
var taskIncomplete = function() {
//When the checkbox is unchecked append to the #incomplete-tasks
var listItem = this.parentNode;
incompleteTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
};
var bindTaskEvents = function (taskListItem, checkBoxEventHandler) {
//select listItem'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.addEventListener("click", editTask);
//bind deleteTask to delete button
deleteButton.addEventListener("click", deleteTask);
//bind checkBoxEventHandler to checkbox;
checkBox.addEventListener("change", checkBoxEventHandler);
};
var ajaxRequest = function(){
console.log("AJAX Request")
}
//set the click handler to the addTask function
taskInput.addEventListener("focus", deleteItemText);
addButton.addEventListener("mouseover", ChangeAddButtonClass);
addButton.addEventListener("click", addTask);
addButton.addEventListener("click", ajaxRequest);
//cycle over the incompleteTasksHolder ul list items
for (i = 0; i < incompleteTasksHolder.children.length; i++ ) {
//for each list item
//bind events to the list item's children (taskCompleted)
bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}
//cycle over the completedTasksHolder
for (i = 0; i < completedTasksHolder.children.length; i++) {
//for each list item
//bind events to the list item's children (taskIncomplete)
bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}
Michael Ross
11,204 PointsI think I came to a solution, however, I am not sure why it actually works! Can anyone enlighten?
I changed the following code from:
checkBox.addEventListener("change", checkBoxEventHandler);
TO:
checkBox.onchange = checkBoxEventHandler;
By changing this it seemed to solve the problem. Does anyone know why?
William Li
Courses Plus Student 26,868 PointsWilliam Li
Courses Plus Student 26,868 Pointsfixed the syntax highlighting for the code block