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!

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 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,938 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.