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 Ben Os
Ben Os
20,008 Points

Js function expression - 3 small clarification questions

section.addEventListener('click', (e) => { if (e.target.tagName != "INPUT") return; e.target.style.backgroundColor = 'rgb(255, 255, 0)'; });

  1. Is there a must for using an argument?

  2. What is the difference between target.tagName to document.getElementsByTagName? The main difference I could find is that the former is written inside conditionals and the latter isn't.

  3. Why does target.tagName's value is written capitalized while document.getElementsBuTagName isn't ?

Deep thanks to those who will answer.

Guil Hernandez Joel Kraft

1 Answer

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Okay let me take a stab at this:

1) The argument e corresponds to the click event. There are many different types of events with many different properties.

2) When you are looking at e.target, you're looking at information the browser is making available about the click interaction that the user just triggered, and in this case, specifically the element that was use to trigger this event.

tagName is a property that tells you what type of HTML element it was. The user might have clicked on something else in the section, which would also trigger a click event, but we only want to change the background colour of a clicked input element, so that's why that check is in there.

If the code instead used document.getElementsByTagName('input'), then clicking on any element in the section would change the background colour of the matching input.

3) No sure why tagName uses uppercase for HTML elements, but if it's XHTML or other XML, it preserves the case. The getElementsByTagName method actually lowercases the argument passed to it anyways, so you can use either upper or lower case.

Ben Os
Ben Os
20,008 Points

I concluded also that getElementsByTagName is general and argument.target.TagName is specific. The first is for checking what to work on, and the second is what to target inside it.