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 Perfect

the text of the label

Hello,

I have been trying very hard to figure out why the value of taskInput does not appear in the newly created input label after your press the button.

What is this supposed to do:

label.innerText = taskString;

**Please run the code below and see if the value of taskInput is visible on the new label.

<!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">    
    <style>
    listItem
    </style>

</head>
<body>
    <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>
var taskInput = document.getElementById("new-task");
var incompleteTaskHolder = document.getElementById("incomplete-tasks");
var completeTaskHolder = document.getElementById("completed-tasks");

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"); // text
  //button.edit
  var editButton = document.createElement("button");
  //button.delete
  var deleteButton = document.createElement("button");

  //Each element needs modifying

  checkBox.type = "checkbox";
  editInput.type = "text";
  label.innerText = "LoveSuck";
  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;








}
var addButton = document.getElementsByTagName("button")[0];
var addTask = function(){
var listItem = createNewTaskElement(taskInput.value);
incompleteTaskHolder.appendChild(listItem);


} 
addButton.addEventListener("click", addTask);









</script>

</body>
</html>

3 Answers

I think you should try using the .value method where you define taskInput instead.

var taskInput = document.getElementById("new-task").value;

Then, remove the .value method from your definition of listItem:

var listItem = createNewTaskElement(taskInput);
David Omar
David Omar
5,676 Points

not sure right now but for form inputs shouldn't you use the value property instead of innerText?

In addition to the other comments, you don't declare and assign taskString a value.

Edit: Matthew Orndoff: You're right. the indentation of var listItem threw me off. In that case, making the correct Michael De Marre suggests should fix it.

taskString is just the function argument, it doesn't need to be defined like a variable. Its value is whatever is passed into the createNewTaskElement function.