JavaScript JavaScript and the DOM Responding to User Interaction Event Delegation

Nick Rocha
Nick Rocha
7,876 Points

How to use event.target when setting specific event handlers?

I am not able to pass this quiz. The function is undefined. Can you take a look at my code>

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]);

section.addEventListener('click', (e) => {
  if (e.target.tagName == 'INPUT'){
    e.target.style.backgroundColor = 'rgb(255, 255, 0)';
  }
});
Steven Parker
Steven Parker
162,979 Points

Jinjia Lin — This deserves to be an answer instead of a comment. If I were a moderator, I would promote it for you.

Jinjia Lin
Jinjia Lin
9,469 Points

Hi guys, thanks! It's my first contribution on this forum so I didn't know :/ thanks once again!

1 Answer

Jinjia Lin
Jinjia Lin
9,469 Points

Hi Nick,

The error is in the first line of app.js.

Instead of let section = document.getElementsByTagName('section'[0]),

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

The getElementsByTagName function takes in the argument of a tagname, i.e. section.

if you enclose [0] within the brackets, the function cannot read the tag name and thus it is undefined.

After reading the correct tag name (section), it will then look for index 0, thus (section)[0] is the correct answer.

Hope this helps!

Jennifer Nordell
Jennifer Nordell
Treehouse Moderator

Hi there, Jinjia Lin ! Steven Parker is correct so I took the liberty of changing your "comment" to an answer, which is really great by the way. Besides marking this post as "Answered" in the community, it also has the added bonus of allowing others to vote on your answer and possible assignment of "Best Answer". Thanks for helping out in the Community! :sparkles: