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

Posted by Dskellth theFirst
Dskellth theFirst
Courses Plus Student 66 Points

I dont understand the question

I dont understand this question can some1 help me with it?

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) => {
  e.target.style.backgroundColor = 'rgb(255, 255, 0)';
});

1 Answer

matth89
matth89
17,826 Points

Right now your event handler is selecting the entire 'section' element. The challenge is wanting you to find a way to filter within the event handler and only select the input element. Hint: a conditional statement would come in handy here.

Dskellth theFirst
Dskellth theFirst
Courses Plus Student 66 Points

what's conditional statement?

matth89
matth89
17,826 Points

Conditional statements like 'if' and 'else' are covered in the JavaScript basics course. If you haven't been through that course yet, I would recommend starting there before working with the DOM.

Dskellth theFirst
Dskellth theFirst
Courses Plus Student 66 Points

ik what if and else statements is thx, but can you show me how to do it?

matth89
matth89
17,826 Points

If I post the code the moderators will delete it, but basically what you are needing to do is wrap the line e.target.style.backgroundColor = 'rgb(255, 255, 0)'; in an if statement that checks to see if the element selected within 'section' is an input element.

Dskellth theFirst
Dskellth theFirst
Courses Plus Student 66 Points

What do I need to write in the if statement? Or what thing do I have to change color to?

matth89
matth89
17,826 Points

You need to check with an if statement to see if e.target.tagName is equal to the input element.

matth89
matth89
17,826 Points

If you're still having trouble, here's another discussion on the topic that might give you some clues.

https://teamtreehouse.com/community/event-delegation

Dskellth theFirst
Dskellth theFirst
Courses Plus Student 66 Points

how do i equal it to the input?