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.

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
19,887 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.