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 the Same Callback on Multiple Elements

Gafur Iusupaliev
Gafur Iusupaliev
3,090 Points
Posted by Gafur Iusupaliev
Gafur Iusupaliev
3,090 Points

Wouldn't this code do the same thing? Works fine for me, is there a problem that I don't see?

const nameInput = document.getElementById('name');
const messageTextArea = document.getElementById('message');

messageTextArea.addEventListener('focus', () => {
  messageTextArea.className = 'highlight';
});

messageTextArea.addEventListener('blur', () => {
  messageTextArea.className = '';
}); ```

3 Answers

Alexander Besse
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Alexander Besse
Full Stack JavaScript Techdegree Graduate 34,965 Points
Alexander Besse
.a{fill-rule:evenodd;}techdegree seal-36
Alexander Besse
Full Stack JavaScript Techdegree Graduate 34,965 Points

Hi there, Gafur Iusupaliev!

I guess I'm not sure what your question is. The focus event handler is to handle when a user focuses in on an element, and the blur event handler is when the user strays away from it.

Hopefully, that helps a bit, if not feel free to post another question that will help the community narrow in on your desired answer.

Thank you!

Gafur Iusupaliev
Gafur Iusupaliev
3,090 Points
Gafur Iusupaliev
Gafur Iusupaliev
3,090 Points

I'm comparing my code to the code in the video, I thought the video comes with the question, apparently it does not, that's not what I was asking, I appreaciate your asnwer either way!

Jan Durcak
Jan Durcak
12,662 Points
Jan Durcak
Jan Durcak
12,662 Points

yep working without param

const nameInput = document.getElementById('name');
const messageTextArea = document.getElementById('message');
const focuss= () => { event.target.className = 'highlight' ;}
const blurr= () => { event.target.className = '' ;}

nameInput.addEventListener('focus', focuss)
nameInput.addEventListener('blur',blurr)
messageTextArea.addEventListener('focus', focuss)
messageTextArea.addEventListener('blur', blurr)```
Doron Geyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,884 Points
Doron Geyer
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,884 Points

Alternatively you could also build in the "addEventListener" that way you can add a blur or focus event on any element like this: 

const nameInput = document.getElementById('name');
const messageTextArea = document.getElementById('message');

const focusBlurHandler = (element, focusOrBlur)=>{
  let eventFlag = focusOrBlur;
  if(eventFlag.toLowerCase() == "focus"){ 
    element.addEventListener('focus',(e)=>{
    e.target.className= "highlight";
  });
  }else if (eventFlag.toLowerCase() == "blur"){
    element.addEventListener('blur',(e)=>{
    e.target.classList.remove("highlight");
    });
  }
}


focusBlurHandler(nameInput,"focus");
focusBlurHandler(nameInput,"blur");
focusBlurHandler(messageTextArea,"focus");
focusBlurHandler(messageTextArea,"blur");