Dynamically Made Button
Tags: dom, function, button, dynamic
Published: 2018-09-11 16:23:03

---
title: Dynamically Made Button
published: true
description: This post shows how you can tie a function to a button that was created dynamically as a result of a users action. 
tags: DOM, Function, Button, Dynamic
---

For this post, I will try to explain dynamically created buttons as I understand the concept. The implementation of this code is done via an independently created library that is similar to jQuery but was created for the purpose of learning and understanding what a library is and how it can be used in our code. 

When you want to create a component that is not part of your original HTML, you manipulate the DOM in order to get that component to display. This component can be created as a result to the user doing a certain action, completing a form, and/or clicking on a certain button. In our example, we will create a button as a result of clicking on another button with the id #add.

![alt text](https://thepracticaldev.s3.amazonaws.com/i/4bm6atk7yw1ohhvujppc.PNG "function makeOneNewButton with click event on #add button")

Our DOM initially only has the #add button:
![alt text](https://thepracticaldev.s3.amazonaws.com/i/wtdrtnuaj0fk0u54que5.PNG "add button on DOM" )

After we click on the add button, we successfully add our new button on the page:
![alt text](https://thepracticaldev.s3.amazonaws.com/i/hneueabiawd6pf8fzb01.png "new button on DOM")

Now, lets make a function and run that function when we click on our new button with the id #myNewButton: 
![alt text](https://thepracticaldev.s3.amazonaws.com/i/kplbudmf67smw37jrb1h.PNG "testNewButton function")
![alt text](https://thepracticaldev.s3.amazonaws.com/i/bakrzv290i39x85pnfwx.PNG "associating new function to our new button")

With the new lines of code, we expect the new button to console a message for us once we click on it. However, nothing shows up in the console:
![alt text](https://thepracticaldev.s3.amazonaws.com/i/udef1ah8f3z03d3o6926.png "DOM after clicking on new button")

Why didn't this work? Our code is written correctly but we did not see a new message in the console. This is a rather hard concept to grasp and it has to do with dynamically changing our DOM and with the concept of [Bubbling and Capturing.](https://javascript.info/bubbling-and-capturing) 

The way I think about it is that the new button was not in the initial code thus our function did not have a point of reference to attach our listener (the click event) to our new button. Rephrased: our testMyNewButton function could not be tied to #myNewButton because that button was not part of the initial html that loaded.

So instead, lets add the function to something that was already there. We can association the function to clicking on the document, on the body, or any other component that was in the origin HTML. For this example, we will associate the function to clicking on the div with the .container class as this is the div we appended the new button to. 
![alt text](https://thepracticaldev.s3.amazonaws.com/i/eo476aa1rdkeu5fyyqcs.png "associating function to .container")

Now if we refresh our DOM and click on the new button, we get a new message in the console:
![alt text](https://thepracticaldev.s3.amazonaws.com/i/xjawlon09dd1e7tzmb7d.png)

Seems to work well! But what if I click to the right of our new button? 
![alt text](https://thepracticaldev.s3.amazonaws.com/i/1aikck851htfwnchfv1g.png "all of the .container div")
Our console logs another message here too. This is consistent with our code. Remember, we associated the function to the entire .container div thus we expect the function to run upon clicking anywhere inside of .container :
![alt text](https://thepracticaldev.s3.amazonaws.com/i/f3h8rlr6gmtptwaxwivv.png "clicked anywhere in .container")

To fine tune and solely associate the click event to our new button, lets add some conditions to our function in order to check on the id of the element the user clicked on. To start, lets create a variable that will store the id of the element we will click on. To do this, we will use our initial "submittedOrClickedEvent" parameter and grab the target. The target will be the inner most element where our click event originated from. If that element has an id, we will want to store it:
![alt text](https://thepracticaldev.s3.amazonaws.com/i/k6e1i7qxn90xae35vf72.PNG "id of our target element")

Now that we have a variable with an id of an element, we can use it to compare it with the id of our new button #myNewButton :
![alt text](https://thepracticaldev.s3.amazonaws.com/i/4jdkndbogmf7cdwfzjr2.PNG "conditions when clicking on .container")


Once we refresh our DOM and click on the new button and only our new button, we will see our function running and printing to the console: 
![alt text](https://thepracticaldev.s3.amazonaws.com/i/73ri045oddzbj8anh9gz.png "clicked on new button")