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

Rishit Shah
Rishit Shah
4,975 Points

My solution to the last problem

Here is my code to solve the adding empty tasks. The problem i am facing is that if i do not enter anything after the "else" statement. It adds multiple list items without any text in them. With the alert statement it works just fine. Please help

var createNewTaskElement = function(taskString){
    //create listItem
    var listItem = document.createElement("li");
    // input checkbox 
    var checkbox = document.createElement("input");
    //create label 
    var label = document.createElement("label");
    //create text
    var editInput = document.createElement("input");
    //button.edit
    var editButton = document.createElement("button");
    //button.delete
    var deleteButton = document.createElement("button");
    //each elements needs modified 

  checkbox.type = "checkbox";
  editInput.type = "text";
  editButton.innerText = "Edit";
  editButton.className = "edit";
  deleteButton.innerText = "Delete";
  deleteButton.className = "delete";
  label.innerText = taskString;

  //each element needs appending append
    listItem.appendChild(checkbox);
    if (taskString !== ""){
    listItem.appendChild(label); 
    } else{
       alert("enter something")
    }
    listItem.appendChild(editInput);
    listItem.appendChild(editButton);
    listItem.appendChild(deleteButton);

  return listItem;
}

1 Answer

Eina Onting
PLUS
Eina Onting
Courses Plus Student 3,266 Points

What I did was add the if statement on the addTask function so it checks the value of taskInput before it even does any appending (or at least that's my understanding of it):

//Add Task
var addTask = function(){
    console.log('Add task');
    //Create a task -- new list item w/ text from #new-task and the elements inside
    //make sure the task has something there
    if(taskInput.value.length > 4){
        var listItem = createNewTaskEl(taskInput.value);
        //Append to Incomplete Task Handler
        incompleteTasksHolder.appendChild(listItem); 
        bindTaskEvents(listItem, completeTask);
        //make input blank after submitting
        taskInput.value = ''; 
    }else {
        alert('There was nothing there! Please type a task on the field.');
    }
};

I put 4 just because, asking if it's not an empty string should work too.

Hunter G
Hunter G
6,612 Points

Great solution, thank you Eina!