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.

JavaScript Callback Functions in JavaScript Callbacks and the DOM Using Callbacks on Text Inputs

Posted by Christopher Evans
Christopher Evans
9,896 Points

Can 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
Liam Clarke
19,887 Points

Hello

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.