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 JavaScript and the DOM (Retiring) Traversing the DOM Using parentNode to Traverse Up the DOM

why does it add an empty string?

i noticed that when the input is empty and you click the 'add button' it adds a list of an empty string. how do i correct this.

1 Answer

28,538 Points

It adds an empty string because there is no code telling it not to. Computers do the exact thing your code tells it to and nothing beyond that. Since the code for adding an item simply instructs JavaScript to take the text value from the field and add it, that's what it does. Whether the text input is empty or not does not matter at all.

As for how to avoid that you just have to explicitly write code to check if the input is empty and stop the function if it is.

The simplest way of coding that would probably be something like this:

addItemButton.addEventListener('click', () => {
  if (addItemInput.value.trim() === "") { // check if the (trimmed) input textbox is an empty string
      return;  // Return (stop the function) if that is the case 
  let ul = document.getElementsByTagName('ul')[0];
  let li = document.createElement('li');
  li.textContent = addItemInput.value;
  addItemInput.value = '';

There are two things in the above code you might not be familiar with. The first is trim(), that is simply a method that removes white space (spaces, tabs, etc) from the start and end of a string. Without that you could enter a space into the text input box and that would be considered a non empty string and would therefore be added.

The second is that I use the return keyword without specifying any value, this is because of the fact that I'm not using return in the way you are probably used to seeing it used. I'm not using it to pass some data from the function back to some other place, I'm simply making use of the fact that when a function returns it stops running, which means that all of the code below the return statement is not executed.

wow!! what a relief. How did you become so good? i wanna be really good.

6,750 Points

Thanks a lot. :)