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 trialTammy Burke
9,720 PointsI get only one box, and I had to change editInput to taskInput on line 29, in the appending section
editInput caused an error, so I used listItem.appendChild("taskInput");
at least I got something, but only one box instead of two. Why?
PS how do I show my code without it... happening?
thanks
4 Answers
Gavin Ralston
28,770 PointsIf you want to show your code, just use three backticks (under the ~ key) on a line, then paste your code, then three more backticks on a separate line below it.
You can also click on the Markdown Cheatsheet to see more examples, which is below every editor window.
Tammy Burke
9,720 PointsHi Gavin, thank you for the tip. I am no longer getting a error message, but it said that editInput was not defined.
I just only get 1 box when I add a new task in the form.
// Problem: User interaction does notprovice 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 incompleteTaskHolder = document.getElementById("incomplete-tasks");
var completedTaskHolder= document.getElementById("completed-tasks"); //
// New task list button
var createNewtaskElement = function(taskString) {
// Create list Iem
var listItem = document.createElement("li");
// inout checkbox
var checkBox = document.createElement("input");
// label
var label = document.createElement("label");
// input (text)
var input = document.createElement("input");
// button.edit
var editButton = document.createElement("button");
// button.delete
var deleteButton = document.createElement("button");
// Each element needs modifing
// Each element needs appending
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(taskInput);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
return listItem;
}
// Add new task
var addTask = function() {
console.log("addTask...")
// create a new list item form the text fron "new-task
var listItem = createNewtaskElement("Some New task");
// Append listItem to IncompleteTaskHolder
incompleteTaskHolder.appendChild(listItem);
}
// Edit existing task
var editTask = function() {
console.log("editTask...")
// When the edit button is pressed
// if class of parent is .editmode
// siwtch from .editmode
// label text become the input's value
// else
// switch to .editmode
// input value becomes label's textc
// Toggle .editmode
}
// delete task
var deleteTask = function() {
console.log("deleteTask...")
// When deldete button is pressed
// remove parent list item form the unordered list
}
// mark complete
var taskComplete = function() {
console.log("completeTask...")
// When the checkbox is checked
// Append the task list item to the #completed-tasks
}
// mark incomplete
var taskIncomplete = function() {
console.log("incompleteTask...")
// When the cjeckbox is unchecked
// Append to #incomplete=tasks
}
var bindTaskEvents= function(taskListItem, checkBoxEventHandler) {
console.log("Bind list items events")
// Select iliItem's children
var checkBox = taskListItem.querySelector("input[type=checkbox");
var editButton = taskListItem.querySelector("button.edit");
var deleteButton = taskListItem.querySelector("button.delete");
//Bind the next task to editTask to EditButton
editButton.onclick = editTask;
// bind DeletedTask to Delet Button
deleteButton.onclick = deleteTask;
// Bind checkBoxEventHandler to the checkbox
checkBox.onchange = checkBoxEventHandler;
}
// Set the click handler to the AddTask function
// Cycle over the incompleteTaskHolder ul List items
addButton.onclick = addTask;
for(var i = 0; i < incompleteTaskHolder.children.length; i++) {
//Bind the next task to editTask to EditButton
bindTaskEvents(incompleteTaskHolder.children[i], taskComplete);
}
// For reach list items childern {taskcompleted}
// Cycle over the completeTaskHolder ul List items
for(var i = 0; i < completedTaskHolder.children.length; i++) {
//Bind the next task to editTask to EditButton
bindTaskEvents(completedTaskHolder.children[i], taskIncomplete);
}
Gavin Ralston
28,770 Points // input (text)
var input = document.createElement("input");
The script doesn't complain a great deal over taskInput, since it's defined at the top of the script. It probably isn't what you wanted to append to the task item, though. :)
However, what you want to do is look at the line I copied above. I think that's the one you wanted to name editInput
Then change this line back to append editInput
listItem.appendChild(taskInput);
See if that works
Tammy Burke
9,720 PointsI tried that and I lost my new input when I added a new task. I changed this line to:
listItem.appendChild(input); from listItem.appendChild(editInput);
and it seems to be working fine. Sheesh.
Thank you for the help. I am surprised at how willing people are to help out with questions that I generally ask when I'm about to pull out my hair.
Gavin Ralston
28,770 PointsGavin Ralston
28,770 PointsAdditionally even without posting the code you may be able to get some good direction by explaining what the error message was in the console of your browser!