Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perform: Changing Classes

Alex Lowe
Alex Lowe
15,147 Points

Edit Button deletes contents of Todo list item

This works for the most part, but when I press the edit button, the contents of the todo list item goes blank. This will happen when I press the edit button next to "Pay Bills," but not when I press the button next to "Go Shopping," which starts out in edit mode. Which makes me think I'm doing something wrong with the toggle.

Here's my javaScript:

var taskInput = document.getElementById("new-task");
var addButton = document.getElementsByTagName("button")[0];
var incTaskHolder = document.getElementById("incomplete-tasks");
var compTaskHolder = document.getElementById("completed-tasks");

//New Task List Item
var createNewTaskElement = function(taskString){
    var listItem = document.createElement("li");
    //input (checkbox)
    var checkBox = document.createElement("input"); //checkbox
    //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 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
}

//Add a new task

var addTask = function(){
  console.log("Add task...");

     //when button is pressed, 
     //create a new list item with the text from #newtask
    var listItem = createNewTaskElement(taskInput.value);

    //append li to inctaskholder
    incTaskHolder.appendChild(listItem);
    bindTaskEvents(listItem, taskComp);
}




//Edit an existing task
var editTask = function(){
    console.log("Edit task...");


    var listItem = this.parentNode;
    var editInput = listItem.querySelector("input[type=text]");
    var label = listItem.querySelector("label");

    var containsClass = listItem.classList.contains("editMode");


        //if the class pf parent is .editmode
    if (containsClass){
      //label text become the input's value  
      label.innerText = editInput.value;

    } else {
        //switch to .editmode
        //input value becomes the label's text
      editInput.vaule = label.innerText;
    }

    listItem.classList.toggle("editMode"); //toggle .editmode on the parent

}

//Delete an existing task
var deleteTask = function(){
  console.log("Delete task...");
  //remove parent list item from the ul
  var listItem = this.parentNode;
  var ul = listItem.parentNode;
  ul.removeChild(listItem);

}




//mark a task as complete
var taskComp = function(){
  console.log("Completed task...");
     //when the checkbox is checked
      //append the task list itm to the #completedtasks 
   var listItem = this.parentNode;
  compTaskHolder.appendChild(listItem);
    bindTaskEvents(listItem, taskInc);

}



//mark a task as incomplete
var taskInc = function(){
  console.log("incompleted task...");
  //when the checkbox is unchecked
      //append the task list itm to the #incompletedtasks 
  var listItem = this.parentNode;
  incTaskHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskComp);

}

var bindTaskEvents = function(taskListItem, checkBoxEventHandler){
  console.log("bind list item events...");
  //select li'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 deltask to del button
  deleteButton.onclick = deleteTask;
    //bind CBEH to check box
  checkBox.onchange = checkBoxEventHandler;

 }


//Set the click-handler to the addTask function

addButton.onclick = addTask;


//cycle over inctaskholder ul ils
for(var i = 0; i < incTaskHolder.children.length; i++){
   //bind events to list item's children
  bindTaskEvents(incTaskHolder.children[i], taskComp);
}


//cycle over comptaskholder ul ils
for(var i = 0; i < compTaskHolder.children.length; i++){
   //bind events to list item's children
  bindTaskEvents(compTaskHolder.children[i], taskInc);
}

And here's the HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Todo App</title>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">    
  </head>
  <body>
    <div class="container">
      <p>
        <label for="new-task">Add Item</label><input id="new-task" type="text"><button>Add</button>
      </p>

      <h3>Todo</h3>
      <ul id="incomplete-tasks">
        <li><input type="checkbox"><label>Pay Bills</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
        <li class="editMode"><input type="checkbox"><label>Go Shopping</label><input type="text" value="Go Shopping"><button class="edit">Edit</button><button class="delete">Delete</button></li>

      </ul>

      <h3>Completed</h3>
      <ul id="completed-tasks">
        <li><input type="checkbox" checked><label>See the Doctor</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
      </ul>
    </div>

    <script type="text/javascript" src="js/app.js"></script>

  </body>
</html>

2 Answers

I think you just spelled 'value' wrong. It should be:

  //switch to .editmode
   //input value becomes the label's text
  editInput.value = label.innerText; // <-- error was here. it was set to 'editInput.vaule'
Alex Lowe
Alex Lowe
15,147 Points

So I did. Thank you.