Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Responding to User Interaction Event Delegation

aliceinwonderland
aliceinwonderland
7,679 Points
Posted by aliceinwonderland
aliceinwonderland
7,679 Points

What is the "e" as the parameter? I tried changing the "e" to "event", to model this on what the video illustrates.

...and I also left it as "e" and neither works.

index.html 
<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript and the DOM</title>
    </head>
    <link rel="stylesheet" href="style.css" />
    <body>
        <section>
            <h1>Making a Webpage Interactive</h1>
            <p>JavaScript is an exciting language that you can use to power web servers, create desktop programs, and even control robots. But JavaScript got its start in the browser way back in 1995.</p>
            <hr>
            <p>Things to Learn</p>
            <ul>
                <li>Item One: <input type="text"></li>
                <li>Item Two: <input type="text"></li>
                <li>Item Three: <input type="text"></li>
                <li>Item Four: <input type="text"></li>
            </ul>
            <button>Save</button>
        </section>
        <script src="app.js"></script>
    </body>
</html>
app.js 
let section = document.getElementsByTagName('section')[0];

if (e.target.tagName == 'LI') {
  section.addEventListener('click', (e) => {
  e.target.style.backgroundColor = 'rgb(255, 255, 0)';
});
}

4 Answers

I Dilate
I Dilate
3,983 Points
I Dilate
I Dilate
3,983 Points

People use 'e', 'event', and 'evt' pretty interchangeably. In fact you can call it whatever you want, it's just common practice to use one of those three. It's passing the event listener (the click) into the anonymous function.

So for this challenge you can build a simple if statement using e to check for a tagName, e.g.:

let section = document.getElementsByTagName('section')[0];

section.addEventListener('click', (e) => {
  if(e.target.tagName == 'INPUT'){
    e.target.style.backgroundColor = 'rgb(255, 255, 0)';
  }
});
aliceinwonderland
aliceinwonderland
7,679 Points
aliceinwonderland
aliceinwonderland
7,679 Points

Thank you, I. Why "INPUT" instead of "LI"? They are both tags, and input seems to be the more specific one.

aliceinwonderland
aliceinwonderland
7,679 Points
aliceinwonderland
aliceinwonderland
7,679 Points

Also, please remind me why there is the [0] at the end of the first line? I don't understand what it refers to.

I Dilate
I Dilate
3,983 Points
I Dilate
I Dilate
3,983 Points

getElementsByTagName('section')[0] only selects the <section> element.

We can get JavaScript to listen for clicks on everything inside the <section> tag (the parent), rather than write code to listen on each and every <li> (it's children), and then work out which one was clicked using e.target

I Dilate
I Dilate
3,983 Points
I Dilate
I Dilate
3,983 Points

Hi Alice,

Sure, let's look again at the task in that lesson:

In the listener that has been added to the section element, ensure that the text input elements are the only children that trigger the background-changing behavior.

The key term here is "text input elements" - a text input element is a text field in a form, which is represented in HTML using the <input> element.

You can use getElementsByTagName to select anything you like on your page, but the task is asking us to check to see if the element that has been clicked is an <input> specifically.

Lastly, do you remember the lesson on Arrays? You can always recognise an array because it uses [square brackets].

An Array is just a [list, of, different, items]

And every item in an array has an index number (starting from zero), like this:

Array [A, B, C, D] Index [0, 1, 2, 3]

So we can use [0] to select the first item returned in the Array.

getElementsByTagName() always returns a list (Array) of elements (hence the plural 'Elements' rather than singular 'Element'), so even if there's only one of the specified tag on our page, it will always be returned in the form of an Array, and we'll always need to state which one of the items in the array we want to select.

So in this case...

getElementsByTagName('section')[0]

This selects the first item in the array returned by our search for all elements with a tag named <section>.

Does that make a little more sense?

aliceinwonderland
aliceinwonderland
7,679 Points
aliceinwonderland
aliceinwonderland
7,679 Points

But we want to address all of the list items that are input, not just the first?

If any of the input fields are clicked into, a background color will change, if I understand correctly.