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
orange sky
Front End Web Development Techdegree Student 4,945 Pointsthe 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
Michael De Marre
14,198 PointsI 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
5,676 Pointsnot sure right now but for form inputs shouldn't you use the value property instead of innerText?
Nicholas Hebb
18,872 PointsIn 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.
Matthew Orndoff
9,018 PointstaskString 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.