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

Jabor Al thani
Jabor Al thani
2,926 Points
Posted by Jabor Al thani
Jabor Al thani
2,926 Points

DOM

Im kind of confused with the Event.target , I need help atleast to see the complete code . That way I might get the hang of 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

Umesh Ravji
Umesh Ravji
42,386 Points
Umesh Ravji
Umesh Ravji
42,386 Points

Hi Jabor, this is the code, but make sure you understand how it works.

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

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

The target property of the event object is a reference to the element that the event came from. In this challenge you want to make sure that the background color change only occurs when the input elements are clicked, at the start it changes the background color of any of the elements on the page.

The tagName property of the target can be used to find the tag name (as it implies) of the element on which the event occurred. In this case you are looking for the tag name 'INPUT', make sure this is in call caps. By adding the if conditional check, you can make sure it only runs when input elements are clicked, and not other elements. When other elements are clicked, the tagName property will not be 'INPUT' and you will see no change in background color.