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![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![Christopher Evans](https://uploads.teamtreehouse.com/production/profile-photos/10854577/micro_1522078646974_-_Copy.jpg)
Christopher Evans
9,896 PointsCan we break down all the parts of the functions used in this lesson?
const nameInput = document.getElementById('name')
document.getElementById('name') = the HTML element with the ID of 'name' (?)
nameInput.addEventListener('focus', event => {
event.target.className = 'highlight';
});
nameInput = const declared above (i.e. the HTML element with the ID of 'name') focus = Event Listener event = ? target = the HTML element with the ID of 'name' (?) className = the method we need to call in order to highlight?
Can anyone please help me clarify/fill in those gaps?
1 Answer
![Liam Clarke](https://uploads.teamtreehouse.com/production/profile-photos/8225832/micro_IMG_2910.jpg)
Liam Clarke
19,938 PointsHello
Firstly, declare a constant variable named nameInput
which has a value of a DOM Element whose ID is name
const nameInput = document.getElementById('name')
Secondly, add an event to the nameInput
element, of type focus
. With a callback function that is listening for that event, when that event is fired set the class name, event.target.className
, to highlight
nameInput.addEventListener('focus', event => {
event.target.className = 'highlight';
});
So all together your getting a DOM element by ID and whenever that element is focused your setting the event.target.classname, (which is the same element) to 'highlight'
event.target, in this case is the same DOM element as the nameInput variable.