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 Cesar Abeid
Cesar Abeid
3,686 Points

I can't find a solution for this and can't move forward. Any tips?

This one is a bit over my head and I can't find a solution.

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


section.addEventListener('click', (e) => {
  let input = document.getElementsByTagName('input');
  e.target.style.backgroundColor = 'rgb(255, 255, 0)';
});
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>

2 Answers

Daniel Turato
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Daniel Turato
Java Web Development Techdegree Graduate 30,124 Points
Daniel Turato
.a{fill-rule:evenodd;}techdegree seal-36
Daniel Turato
Java Web Development Techdegree Graduate 30,124 Points

So, you need to change the background color based on a condition of the element clicked being an input element. As it's a condition check, you can use an if statement. Now to see what type of element was clicked, you can use target.tagName on the event to compare it to what you desire (an input element) like so:

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

Also, tagNames are in capitals. Hope this helps

Cesar Abeid
Cesar Abeid
3,686 Points
Cesar Abeid
Cesar Abeid
3,686 Points

Brilliant. I think I was having a hard time understanding the question! Thank you so much.