Event Listeners, The Submit Event, Grabbing and Creating Elements to Manipulate the DOM

Listening to the Events and the DOM

In the first 2 months of my transition from the service industry into the world of tech at Flatiron School, I have become fascinated with Manipulating the DOM(Document Object Model) in ways that append and change information from databases and javascript code onto the DOM. The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page. A web page is a document that can be either displayed in the browser window or as the HTML source. In both cases, it is the same document but the DOM representation allows it to be manipulated. As an object-oriented representation of the web page, it can be modified with a scripting language such as JavaScript. The most captivating way of manipulating the DOM is "Event Listeners".

What is an Event Listener?

Event Listeners are the procedures of function in a computer program that waits for an event to occur. Examples of an event are the user clicking or moving of the mouse, pressing a key on the keyboard, submitting something, or an internal timer or interrupt. In other words when the user interacts with the DOM, events occur the way programmers want them to when a user interacts with a certain part of the website or application.

The Submit Event

The submit event is one of the most fascinating events to learn when first starting off in your javascript software engineer path. Let's take a look at an example of a submit event and how it works exactly...

First, we will look at the element where we will be placing our event listener in our HTML file which is what will be displayed on our web browser for the user to interact with.

<!--HTML FILE-->
<form id="submitdiv">
  <label for="names">Names: <input type="text" name="name" id="newNames"></label>
  <br><br>
  <button type="submit">Submit form</button>
</form>
<ul id="log">
<!--Here our list of names will be placed-->
</ul>

Next we will go into our javascript file and grab the form element from our HTML file. Then we will add our event listener to the element we just grabbed.

// JAVASCRIPT FILE
// grabbing the element we are looking for
const form = document.querySelector('#submitdiv')
// adding the click event to the variable of the element we just grabbed
form.addEventListener('submit', (e) => {})

1. We created a variable(const), added a name(form) and assigned the element we are grabbing to the variable(we use const to say that this variable will be constant throughout our entire javascript document). We use a hashtag when grabbing an element with an ID name using a ".querySelector" or otherwise we can use ".getElementById".
2. We attach our newly named variable to our ".addEventListener" then assign the first parameter as the event we are trying to execute. In this case our event is 'submit'.
3. In our second parameter we set an open block of code in which whatever we write inside will execute a submit event upon a click of our button that we have created inside our HTML document on our web browser.

Creating elements to appear once our submit event has been activated and appending them to the DOM

Now let's say we want our our submit event to return something completely new to appear on our web page once our button has been clicked, In this case a name of some sort. How would we go about doing this? Let's take a look...

// JAVASCRIPT FILE
// grabbing the element we are looking for
const form = document.querySelector('#submitdiv')
// grabbing our ul element from our HTML file
const ul = document.getElementById('log')
// grabbing our input element from our HTML file
const input = document.getElementById('newNames')
// adding the click event to the variable of the element we just grabbed
form.addEventListener('submit', (e) => {
     // here we are preventing the page from refreshing upon a 
     //submission
     e.preventDefault()
     // creating an element to place inside our ul element
     const li = document.createElement('li')
     // setting our new element text content to the value of what 
     //we input
     li.textContent = input.value
     // appending our new list of names to our unordered list 
     //element
     ul.append(li)
     // making the input slot reset upon a submit event activation
     form.reset()
})

So first thing we always want to put inside of our submit form code block is "e.preventDefault()" and what that does is stops the page from reloading upon our submit event being triggered.
Next, we grab our "ul" element from our HTML file using "document.getElementByID" by our id name "log" and setting it to a variable. Notice that we did not have to use a hashtag for this because we did not use a ".querySelector". Second, we grabbed our input element by it's id name using the same method(no hashtag needed) and setting it to a variable as well. Then we created a new list element inside of our submit event listener by setting "document.createElement" to "(li)" and giving it a variable name. After that we set the new element "li" text content to the input value which is whatever we are typing into our "Enter Name" slot just above our submit button. Last, we need to append the "li" element and its new text content that is submitted in our "Enter Name" input slot into our already existing "ul" element in our HTML file. We do so by putting our "ul" variable along with ".append" just before our new "li" variable in parentheses. Last we add ".reset()" to our "form" variable to reset the input slot back to default upon our submit event being triggered.

Now when we type a name into our input slot and click our submit button that name should pop up just below in an unordered list fashion inside of our "ul" element on the browser while our input slot is resetting to the default and ready for another name submission. Congratulations! You have learned one of the most prominent and widely used event listeners in all of javascript. Whew! take a deep breath, because we are finally finished.

Conclusion

This was the most fascinating part of my learning experience in Phase 1 of my 5 phase course at Flatiron School. I look forward to learning many more tools that will mold me into a top tier software developer and will help me to innovate and shape the tech industry as a whole.