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

Posted by Denis Udovcic
Denis Udovcic
13,649 Points

Why is this not working, someone please explain.

This is from Interactive web pages with JS. I'm trying to do it myself but I don't really understand why this code doesn't append it.

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 id="mainAdd">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>

Javascipt:

//Problem: User interaction doesn't provide desired results.
//Solution: Add interactivty so the user can manage daily tasks.



var addingText = document.getElementById("new-task");
var addingButton = document.getElementById("mainAdd");



var addIt = function() {
  var theText = addingText.value;

 var li = document.createElement("li");
 var checkbox = document.createElement("input");
  checkbox.type = "checkbox";
 var label = document.createElement("label");

 var inputText = document.createElement("input");
  inputText.type = "text";
 var editButton = document.createElement("button");

  editButton.className = "edit";
  var deleteButton = document.createElement("button");
  deleteButton.innerHTML = "Delete";
  deleteButton.className = "delete";

  // Appending
  li.appendChild(checkbox);
  li.appendChild(label);
  li.appendChild(inputText);
  li.appendChild(editButton);
  li.appendChild(deleteButton);

  var incompleteTasks = document.getElementById("incomplete-tasks");
  incompleteTasks.appendChild(li);
  label.innerHTML = theText;
   editButton.innerHTML = "Edit";
}
addingButton.addEventListener("click", addIt() );

 /*<
 li>
   <input type="checkbox">
   <label>Pay Bills</label>
   <input type="text">
   <button class="edit">Edit</button>
   <button class="delete">Delete</button>
</li> 
*/

1 Answer

Denis Udovcic
Denis Udovcic
13,649 Points
Denis Udovcic
Denis Udovcic
13,649 Points

I fixed it a bit but now on page load some appended elements appear without pressing Add button, so weird.