by
Lessons:12Length:1.4 hours
Practice javascript and learn dom manipulation 400x277
  • Overview
  • Transcript

3.2 Adding Items

In this lesson, we'll give users the ability to add items to the list by using a form.

3.2 Adding Items

In this lesson, we are going to add the ability to dynamically add new items to our list and we're going to start by changing some of the style as well as the HTML markup. Primarily because if we keep going down this route, we're going to have to write a lot of CSS. And I would much rather rely upon something that's going to give us a lot of utility such as bootstrap. So I'm gonna paste in a CDM for bootstrap and we're going to make a few changes. First, we're going to add some padding to the top of the body so that everything is at flush with the top, 10 pixels is good enough for me. The next thing we're going to do is change ID to class, so that we have the container class, we're gonna have a row inside of there, and then we're gonna have two columns of 6. Let's go ahead and create those, and on the left side, we're going to have our list, so let's go ahead and put that there. And then, on the right-hand side we're going to have our form. Now, we don't actually need an actual form, in this case. We are not submitting anything to the server to be processed. So you could use a form here, but you would also have to do a few extra things as far as handling events are concerned. I want to keep this as simple as possible. So we're going to have a div element that has a form group class and then inside of here, we're just gonna have our input element. So we're not gonna worry about a form or anything, we'll have our input element it will have a class of form-control, that is of course from bootstrap. Let's also give it an ID of new-Item-text. That way we can retrieve this element, grab its value, and then use that value for the text of our newly created li element. Now we also need a button, so let's add that and there's can be just Add Item. So let's look at what this looks like. That looks good, I can live with that. And so now we want to handle the click event on the button so that we will grab the value of this input element and add that as a list item to our list. So we can set up this click event handler in a well, many ways. We can do essentially what we did with the li elements and that we could retrieve it with JavaScript, and then call add event listener and all of that stuff. We could also do this, onclick= and then we could specify the function that we wanted to call addItem. In this case, I'm perfectly fine with this. There will be some professionals that say no, you shouldn't do that at all but really this is fine. So let's add a function called addItem, and this is going to execute whenever we click on the button. So the first thing we want to do, is retrieve our input element so that we can get its value. So let's create a variable called Input and we will call getElementById will pass in the ID, and then we went to get the value. Now, if you know your HTML then you know that an input element has a value attributes. And of course whatever is in that value attribute is the value of the input element. Well, as far as the element object itself, it has a value property that maps directly to the value attribute. So we would say, input.value and there's our value. So then, we want to create our li element, we will use document.createElement and then we want to create a text node and append that to our li element. And so, the text for this text node is the value from the input element and then we want to add that to our ul element. So we will need to retrieve that as well. So let's use query selector for that and our selector I guess we could just do ul with a class of list. So then we can say ul.appendChild li. So let's test it. So this is a new item and then whenever we click on add item it should add it as a new item. That's great, but if we click on it nothing happens. Now we can still click on these other items, but nothing happens whenever we click on this new item, and that's because we haven't set up the click event for it. Something else, we should also clear out the value of the text box, so that's easy enough to do. At the end of this function we can say input.value= an empty string. That will of course, clear that out so that we can come back and type some more and then add that item. But once again, we need to address the lack of a click event for these new li elements. So here we can essentially do what we did whenever we originally set up the quick events. Really the only difference is the name of the object instead of he elements, we want to change that to li. So if we go back and we add a new item, we click on to add that, we can now click on our new item, and that is activated. However, we have just duplicated code, and if we needed to add any extra lines of code to this click event handler, then we would have to do that in two places. Because we have it right here and we also have it right here. So one thing we can do is write a separate function, one that would handle the li click event and then we could use that function instead of this anonymous function. So we will just replace that anonymous function with Ii click handler, we will do the same thing up here. So that now whenever we go back to the browser, we can type in, hello world. We will add that item, the text box is cleared, we can select that new item and we don't have any duplicate code. So in the next lesson, we are going to add the ability to remove an item as well as reorder the list.

Back to the top