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

Tyler Nilsson
Tyler Nilsson
10,106 Points
Posted by Tyler Nilsson
Tyler Nilsson
10,106 Points

Only change the 'LI' elements inside the <section> tags with a style property.... I know this is right but not working..

I am trying to add a style background color to only the 'LI' elements in the <section> tag but for some reason it's saying that I'm not calling it right. My error message is 'Make sure you are selecting the correct elements' .... Well what else could I possibly be selecting???

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

2 Answers

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

You are really close on this. What you need to do is to change the conditional from LI to INPUT. This is because you are trying to style the section element and, ensure that the text input elements are the only children that trigger the background-changing behavior. Not the li itself.

Ward Salud
Ward Salud
13,455 Points
Ward Salud
Ward Salud
13,455 Points

Yes, change LI to INPUT. It worked for me.