An easy reference for setting up basic user interaction on click events
Adding to the DOM
In almost all use cases, I want to create elements that will display the inputs that I put in the input tag. For reference sake, this is what I’m trying to make:
So here is my approach:
- First declare you variables and get them by either id or by querySelector. By my logic, you’ll need to get the parent div, the input, as well as the add and remove buttons.
So your set up to start might look something like this:
An important detail to note is that I’ve decided to get the button with querySelector, which normally only returns the first element that matches this. So to get around this, I’ve asked for both the element as well as the class name.
2. Create an EventHandler
At this point, we need to start to create an interaction that does what we want. So the first thing we want to do is to be able to create an event handler on the specified element. In this case, this would be the addItem button that we declared a moment ago.
Inside of that, we want to first make sure that we are getting the input value. So to test, I’ll create my event handler and then make sure that I’m getting my input value on click.
3. Create the element type and make sure we are making our new text the value of our input. This will require us to declare a variable and create an Element, and then use the textContent method to show that content.
4. Append to the parent div
From there, all we have to do is append it to the parent using the appendChild method. If we want to add any styling, all we have to do is to apply the setAttribute method. Alternatively, we can also add the styling for these elements in css. The trick with that, however, is to make sure that you include either the correct className or Id to match the one you’ve created. In any case, here is what you could have made.
Removing Nodes is a very similar process to adding nodes. In my case, I have added an additional button in the html because this seems to be more like the natural behavior you would have with an interface. So here are my steps:
- create another event handler for removing buttons
Like before, I want to add the item that I want to create the interaction with onto the event. So I’ve used my removeButton variable and applied it as below.
2. grab the element that you want to remove
Then I want to create a local variable that will grab the particular element that I’ve created and remove it. In my case, I want to remove elements from the end of the list, so I’m going to apply a method from CSS that will do just that.
3. apply the removeChild method from the parent on to the child div.
Once again, I’m going to put the parent on to the child, but with the removeChild method. Here is what I should have in the end.
Adding Additional Elements on Click Events
Often is the case, I will often want to add a button or some other features on a click event along with some content, so in that case, I often find it easier to add my code with the help of a function that I can call inside of my eventhandler. So with that, here are my steps:
- Create a function and an a li argument to it.
2. After doing that, I want to declare a variable and then add a createElement, ClassName, and a textContent to this particular element I’ve created.
3. Once you’ve completed this task, it’s usually a good idea to then append it to the parent. In this case, I’ll apply the argument I’ve created. Once I’ve done that, I’ll go ahead and call this method in my event handler.