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: Modifying Elements

Jonas Troyer
Jonas Troyer
10,912 Points

Unable to get text from the add task input to show up in the event on the scheduled event task.

I'm tasked with getting the app to add an event. It's showing up in the todo section without any text added to it.

... //Problem: User interaction doesn't provide user interaction desired. //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 incompleteTasksHolder = document.getElementById("incomplete-tasks"); //incomplete-task var completeTasksHolder = document.getElementById("completed-tasks"); //completed-tasks

//Each element needs modifying

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

checkBox.type = "checkbox"; editInput.type = "text";

editButton.innerText = "Edit"; editButton.className = "edit"; deleteButton.innertext = "Delete"; deleteButton.className = "delete"; label.innterText = taskString;

//Each Element needs appendeding

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 new list item with the text from the new task var listItem = createNewTaskElement(taskInput.value);

//append listItem to incompleteTaskHolders incompleteTasksHolder.appendChild(listItem); bindTaskEvents(listItem, taskCompleted);

} //Edit an existing task var editTask = function() { console.log("edit task..."); //When the edit button is pressed //if the class of the parent has the class edit mode //Switch from .editMode //Label text become the input //else //Switch to editMode //Input value becomes the labels text //toggle .editMode on the parent }

//Delete an existing task var deleteTask = function () { console.log("Delete Task..."); //When the delete button is pressed //Remove the parent list item var listItem = this.parentNode; var ul = listItem.parentNode; ul.removeChild(listItem); } //Mark a task as complete var taskCompleted = function() { console.log("Task complete"); //When the checkbox is checked var listItem = this.parentNode; completeTasksHolder.appendChild(listItem); bindTaskEvents(listItem, taskIncomplete); //append the task list item } //Mark a task as incomplete var taskIncomplete = function() { console.log("Task incomplete"); //When the checkbox is unchecked append this to imcomplete tasks var listItem = this.parentNode; incompleteTasksHolder.appendChild(listItem); bindTaskEvents(listItem, taskCompleted); }

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) { console.log("Bind Events to an Item"); //select taskListItem'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 deleteTask to delete button deleteButton.onclick = deleteTask; //bind taskCompleted to the checkbox checkBox.onchange = checkBoxEventHandler;

}

//Set the click handler to the addTask function addButton.onclick = addTask;

//cycle over incompleteTaskHolder ul list items for(var i=0; i<incompleteTasksHolder.children.length; i++) { //for each list item //bind events to list item's children bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted); }

//cycle over completeTaskHolder ul list items for(var i=0; i<completeTasksHolder.children.length; i++) { //for each list item //bind events to list item's children bindTaskEvents(completeTasksHolder.children[i], taskIncomplete); }

...

3 Answers

kevinardo
seal-mask
.a{fill-rule:evenodd;}techdegree
kevinardo
Treehouse Project Reviewer

Jonas, are you developing in the Firefox browser? If so try .textContent instead of .innerText.

But if this is a copy paste of your code, you have a typo: label.innterText = taskString; <-- it says innterText instead of innerText.

Floyd Orr
Floyd Orr
11,723 Points

In the previous steps was everything wire framed correctly, and did you verify all buttons work by doing console.log?

Thank You Kevin, that solved the problem for me.