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

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perform: Appending and Removing Elements

I 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
Gavin Ralston
28,770 Points

If 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.

Gavin Ralston
Gavin Ralston
28,770 Points

Additionally 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!

Hi 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
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

I 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.