JS: DOM Manipulation II

Learning Goals

  • Access values input by the user
  • Use Chrome dev tools to explore the event object
  • Manipulate elements that have been programmatically added to the DOM after page load

Vocabulary

  • Event Any event which takes place in the DOM, these can be generated by users or the browser.
  • Event Listener A function invoked on a DOM node which fires the event handler when a specified event occurs on the node or its children
  • Event Handler A function that will run when a specific event occurs
  • event.target The element that is the “target” of the event. For example, the element that is clicked on in a click event.


DOM Manipulation Based on User Interaction

DOM manipulation based on user interaction requires putting several pieces together which is challenging! We can break it down into 3 steps:

  • Elements: Querying the elements we’ll need
  • Event Listener: Adding the event listener
  • Function: Creating the function that the event listener will trigger

It is valuable to pseudocode out the steps of what you’re trying to do before you try to do it in code. Work through the practice below to revisit what we learned in the Intro to DOM Manipulation lesson.

Warm Up

Work through the practice below to revisit what we learned in the Intro to DOM Manipulation lesson.

DOM manipulation based on user interaction requires putting several pieces together which is challenging! It is valuable to pseudocode out the steps of what you’re trying to do before you try to do it in code.

Fork this Add Box Codepen.

Objective:

  • Users should be able to click on the “Add Box” button to add additional boxes to the page.

First plan it out:

  • Looking at the existing HTML and CSS
  • Pseudocoding the directions, as step-by-step as possible, that you want to give to the computer.
  • What are the DOM elements that your JS will need to know about? What variable names will you use for them?
  • What event do you want to be “listening” for? What element does that event need to happen on?
  • What do you want to happen when the event occurs on the specified element? What will you name the function that holds that code?

Then code it out:

  • Implement your ideas in code.
  • One person should share their screen and drive while the other navigates.
  • The navigator should be coding along on their machine as well.

Get User Input

We already know how to programmatically change text, html and styling on the DOM when users take various actions. But what about collecting data from the user?

Another property that some HTML elements have, particularly input elements, is value.

We can use the .value property available on an input DOM element to get the value that a user has typed into it.

Explore

Follow the steps below to explore how .value works!

  1. Open your dev tools and inspect this box, specifically, the input field below. What is its unique identifier?
  2. In the console, call document.querySelector('#check-me');
  3. In the console. call document.querySelector('#check-me').value;
  4. Type your favorite food into the input
  5. In the console. call document.querySelector('#check-me').value;

When called, the .value property on an input element will return the current value.

Paired Practice

Fork this Dinner Time codepen.
Now that we know that we can access the user input with the .value property, we can actually change what is showing on the DOM based on what a user types in!

Use JavaScript to capture the input values when the user clicks the Make Dinner button and update the content of the page accordingly.

First think it through, break it down and plan it out.
User types in inputs then clicks Make Dinner. Values from the inputs become the new main dish, side dish and dessert text shown on the page.

Take a few minutes to ask yourself and pseudocode out:

  • What are the DOM elements that your JS will need to know about? What variable names will you use for them?
  • What event do you want to be “listening” for? What element does that event need to happen on?
  • What do you want to happen when the event occurs on the specified element? What will you name the function that holds that code?
  • When and how will you grab the values the user has typed in?

Now code it out. One person should screen share and drive, the other should navigate. Navigator can also be coding along on their machine.

One of the top misconceptions/mistakes we see students make is attempting to capture the value of an input while the input is empty. If you want to get a user’s input, we have to get the value after the user has entered it. We do this by accessing the .value property via some event listener - on an event that happens after the user has typed into the input field - like clicking Submit after filling out a form.

Thinking Ahead:

  • What if you wanted to invoke 3 functions in a row on button click?
  • What if you need to use logic to determine which function should be invoked on an event?
  • Is it ok to have logic written out within our event listeners? Why? Why not?
  • What if we need to pass an argument to the function we’re invoking in our event listeners?
  • Why should we save our queried elements to variables? Why don’t we just type out the query selector when we need to access that variable?


Event.target

We’ve already explored the many times of events that can occur on our webpages and applications. Let’s dig a little deeper into the event itself - regardless of which type.

Let’s go back to our Add Box codepen from the warmup and add another feature together.

Objective:
Users should be able to click on any of the boxes they’ve added and see that box change from gray to purple.

First think it through, break it down and plan it out.
After user adds more boxes…clicks any box…that box turns purple…

Take a few minutes to ask yourself and pseudocode out:

  • What are the DOM elements that your JS will need to know about? What variable names will you use for them?
  • What event do you want to be “listening” for? What element does that event need to happen on?
  • What do you want to happen when the event occurs on the specified element? What will you name the function that holds that code?

Hm, usually we just use document.querySelector() to grab the element we want to add the eventListener to. But the boxes are being dynamically added to the DOM when the user clicks the Add Box button. We can’t grab them using document.querySelector() because they don’t exist yet when the files load. We’ll have to use a workaround approach that leverages the event.target.

What we can do is write code that says:

  1. “Listen” for a “click” within the entire <section> that the boxes live in…
  2. When a click happens within that section, figure out which box was clicked on…
  3. Turn that box purple by adding the “purple” class that’s already styled in the CSS file

Check For Understanding

Recap

  • What are 3 steps required when doing DOM manipulation based on user interaction?
  • How do you access the values a user has entered?
  • What is the preferred way to change styles programmatically?
  • How do you access the element that a click event (or other type of event) occurred on?
  • How do you access and manipulate elements that have been dynamically added to the DOM (since you can’t use a simple querySelector)?

Suggested re-teaching practice

  • Work through the exercises in this legacy front end lesson on Event Bubbling and Event Delegation
  • Create a codepen with an HTML form that collects to-do list info: task, priority level, description. When the user enters info and submits the form, create a litte “card” of that info and display it on the DOM. For an added challenge, add functionality to delete the task card if the user double clicks it.
  • Read up on the event listener documentation

Lesson Search Results

Showing top 10 results