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 JavaScript and the DOM (Retiring) Making Changes to the DOM Modifying Elements

Why does one approach work and the other doesn't?

Here is an analysis of a challenge that took me a long time to solve for no apparent (to me) reason.

Challenge Task 1 of 2 Store the value of the text input element in the variable inputValue. (If you need a refresher on getting the value of a text input, this video from the previous section demonstrates how.)

... let inputValue = document.getElementById('linkName').value; ...

Result:

Well done! You're doing great! Next task

Challenge Task 2 of 2 Set the text content of the a tag to be the value stored in the variable inputValue.

Here is what I tried initially: (reasoning “the ‘a’ tag is a lower level than #id”)

let inputValue = document.getElementById('linkName').value;
document.getElementsByTagName('a').textContent = inputValue;

Result:

Bummer! The anchor tag's text content has not been set.

After many hours (my fault) of trying various iterations of the previous (adding event listeners, etc. and tracking it in the console). I tried this: (changed from TagName to Id on the select)

let inputValue = document.getElementById('linkName').value;
document.getElementById('link').textContent = inputValue;

Result:

Congratulations! You completed the challenge!

So, I was successful. However, I am not sure why one approach worked and the other didn’t, since they both go after the same element. I realize they return different forms of the element. But, as the following (copied from the control panel) shows, they both include the textContent property:

document.getElementsByTagName('a')
[a#link]0: a#linklength: 1link: a#linktextContent: ""__proto__: HTMLCollection
document.getElementById('link')
<a id=​"link" href=​"https:​/​/​teamtreehouse.com"></a>document.getElementById('link').textContent
""
document.getElementsByTagName('a').textContent
""

Is this simply a case of “You didn’t solve the problem the way we wanted you to” or is there really a difference that would cause a failure in a production environment. And, if so, please explain. I spun my wheels on this one for hours.

I would genuinely like to know.

2 Answers

Chris Davis
Chris Davis
16,280 Points

I believe the reason why is because getElementsByTagName returns an array of items, if you notice, Elements is plural. getElementById returns a single item.

If you used...

document.getElementsByTagName('a')[0].textContent = inputValue;

It would have worked. Here is a demonstration https://jsfiddle.net/qhskqkkk/1/ Hope that helps :thumbsup:

I think you are right. And it makes sense in light of :

document.getElementsByTagName('a')
[a#link]0: a#linklength: 1link: a#linktextContent: ""__proto__: HTMLCollection

The returned value above is showing the it is the 0th element in the array.