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 Callback Functions in JavaScript Callbacks and the DOM Using Callbacks on Text Inputs

Tashan Duncan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tashan Duncan
Front End Web Development Techdegree Graduate 17,799 Points
Posted by Tashan Duncan
.a{fill-rule:evenodd;}techdegree seal-36
Tashan Duncan
Front End Web Development Techdegree Graduate 17,799 Points

Why not just use CSS :Focus pseudo-class??

I see the Styles.css file in the workspace has a highlight class with the below properties:

.highlight {
    box-shadow: 0px 0px 10px #755d00;
}

I moved the properties onto the focus class and got the same result as the video without having to use event listeners.

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus {
  background: #fff;
   box-shadow: 0px 0px 10px #755d00; //here
}

Why even use an event listener for something like this? arent we using more code than is needed?

Thank you

1 Answer

Sheila Anguiano
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Sheila Anguiano
Full Stack JavaScript Techdegree Graduate 35,234 Points
Sheila Anguiano
.a{fill-rule:evenodd;}techdegree seal-36
Sheila Anguiano
Full Stack JavaScript Techdegree Graduate 35,234 Points

Well, like most problems, there is always more than one solution, in this case the objective of the exercise is to show how to use callbacks with Event Listeners with something simple like highlighting a field on a form, but for example CSS won't help you if you want to click on an item and delete it from a TO DO list for example (or maybe it could, but I don't think it would be the best way)