Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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.

what's conditional statement?

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.

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

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.

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

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

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

how do i equal it to the input?