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

Jerome Diehl
Jerome Diehl
2,678 Points
Posted by Jerome Diehl
Jerome Diehl
2,678 Points

How to run tooltip when input is blank (and should have an entry item!)?

Hi, I am trying to 'Perfect' the Javascript ToDo list. I have it set up so that if a user tries to add a task without entering a value the if else statement will decide whether to fire off the add task function or have a tooltip pop up declaring "you must add an item". My problem is I cant figure out how to load the tooltip after clicking the 'add' button only when the input field is blank.

Here is my JS code

//Add a new task

var addTask = function(){ console.log("Add task...");

var inputButton = this.parentNode; var dataToggle = inputButton.querySelector('button[data-toggle="tooltip"]');

if(taskInput.value){ //Create a new list item with the text from #new-task: var listItem = createNewTaskElement(taskInput.value); //Append listItem to incompleteTasksHolder incompleteTasksHolder.appendChild(listItem); bindTaskEvents(listItem, taskCompleted);

             taskInput.value = "";
} else{
    dataToggle.toggle("tooltip");
}

}

And the HTML

<body> <div class="container"> <p> <label for="new-task">Add Item</label><input id="new-task" type="text"><button data-toggle="tooltip" data-placement="bottom" title="You must add an item">Add</button> </p>

  <h3>Todo</h3>
  <ul class="sortable" id="incomplete-tasks">
    <!---INCOMPLETE TASKS GO HERE -->

  </ul>

  <h3>Completed</h3>
  <ul class="sortable" id="completed-tasks">
    <!---INCOMPLETE TASKS GO HERE -->

  </ul>
</div>

1 Answer

Steven Parker
Steven Parker
229,657 Points
Steven Parker
Steven Parker
229,657 Points

Your title already provides a tooltip, I'm guessing when the button is pressed you want an alert to pop up if the box is empty:

  } else {
    alert("You must add an item");
  }

Besides that, it looks like you have a few other issues, some of them are:

  • addTask is never called (did you mean to have onclick='addTask()' in the button?)
  • taskInput is undefined
  • this.parentNode is undefined
  • incompleteTasksHolder is undefined
  • createNewTaskElement is undefined