How do I prevent an empty list item from being appended to the list?

Question

Workspace snapshot: https://w.trhou.se/8w7i1rnbmc

Chyno Deluxe · Accepted Answer

You would need to add a conditional IF statement to check whether the taskInput value is an empty string. If so, it does nothing if there is text then it will render the text and add the task. Like below
```JavaScript
//Add a new task
var addTask = function() {
  //Create a new list item with the text from #new-task:
  var listItem = createNewTaskElement(taskInput.value);
  console.log("Add task...");
  if(taskInput.value !== "") {
    //Append listItem to incompleteTasksHolder
    incompleteTasksHolder.appendChild(listItem);
    bindTaskEvents(listItem, taskCompleted);
    taskInput.value = "";
  }
}
```

Drew Cook · Answer

I was looking at this problem and my initial thinking was to check to see if the text field value is an empty string, and if it is, disable the button.  If not, append to the list.
something like 
if (taskInput.value == "") {
    addButton.disabled = true;
  } else {
    addButton.disabled = false;
    var listItem = createNewTaskElement(taskInput.value);
    incompleteTasksHolder.appendChild(listItem);
    bindTaskEvents(listItem, taskCompleted);
    taskInput.value = "";
  }
But this was not seeming to work.  I would agree that the original answer here is probably the most efficient though.

Welcome to the Treehouse Community

Looking to learn something new?

Zach Allan

Zach Allan

How do I prevent an empty list item from being appended to the list?

2 Answers

Chyno Deluxe

Chyno Deluxe

Zach Allan

Zach Allan

Chyno Deluxe

Chyno Deluxe

Drew Cook

Drew Cook