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

Posted by Abhijit Das
Abhijit Das
5,022 Points

Why my event target isn't working

ok please help me to find the issue, my html is

<input type="text">

my css is

.bg {
  background-color:#777;
  outline:none;
  border:solid 2px tomato;
}

and my js

const input = document.querySelector('input');
input.addEventListener('click', (e) => {
  if (e.target.tagName === 'INPUT') {
    input.className = "bg";
  } else {
    input.className = "";
  }   
});

once i click the input element the "bg" class name is adding, however, why it isn't removing, once i click on outside of input element? Sorry can't put the the code-pen link this time

1 Answer

Tomasz Halaczkiewicz
Tomasz Halaczkiewicz
21,845 Points
Tomasz Halaczkiewicz
Tomasz Halaczkiewicz
21,845 Points

because you're listening only on input element, so if you click outside nothing happens, on the other hand when you click on input, your condition in if statement is always true so the only thing your program does is adding this class while input is being clicked