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 Interactive Web Pages with JavaScript Selecting Elements and Adding Events with JavaScript Selecting Elements

Saira Bottemuller
PLUS
Saira Bottemuller
Courses Plus Student 1,749 Points

JS - help understanding a challenge/syntax for document.getElementsByTagName();

Hello everyone! I'm doing something wrong here, and I think it's because I am just not fully grasping the usage of document.getElementsByTagName();, although I do feel like I have a marginally better grasp on document.getElementById();.


THE INSTRUCTIONS:

I need to "Select the second SPAN element on the page and assign it to the variable lastName on line 2."


HERE'S WHAT'S GIVEN TO WORK WITH:

var fullName = document.getElementById("full_name");

var lastName;

Here are different incarnations I have tried (and as you can see, I'm kind of throwing spaghetti at the wall trying to figure this out - not just to figure out what's right, but WHY):

var lastName = document.getElementsByTagName(span[1]);

var lastName = document.getElementsByTagName(span class="last_name");

var lastName = document.getElementsByTagName("last_name");

var lastName = document.getElementsByTagName(class="last_name");

As always, the kids in the Treehouse are the coolest kids around, thanks so much for helping out!!!

app.js
var fullName = document.getElementById("full_name");

var lastName;
index.html
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 id="full_name"><span class="first_name">Andrew</span> <span class="last_name">Chalkley</span></h1>

<script src="app.js"></script>
</body>
</html>

5 Answers

Colin Bell
Colin Bell
29,679 Points

You need to put the span in quotation marks. getElementsByTagName returns an HTMLCollection of elements with the given tag name. That is, you only use it on HTML elements (p, span, div, etc.).

Then add which one you want at the end. Remember that the index starts at 0, so to get the second one you'd want to select [1].

Assign that to the variable of lastName.

var lastName = document.getElementsByTagName('span')[1]
Saira Bottemuller
Saira Bottemuller
Courses Plus Student 1,749 Points

Hmmm so I went back to my Challenge today to retake it, and this isn't working for some reason. I tacked a semi-colon onto the end because I think it's supposed to be there, but I also tried it without. Neither worked, unfortunately. Here is what I entered:

var fullName = document.getElementById("full_name");

var lastName = document.getELementsByTagName("span")[1];

I am interested to try Adam's method as well and see if I can get that to work but I don't know if it will fit the criteria of the challenge, since it's a specific statement it seems to be looking for, rather than something similar that does the same thing. I am going to go do some research on the syntax of that as he suggested and mess with that while I wait to see what you think of this, Colin.

Colin Bell
Colin Bell
29,679 Points

The L in getElementsByTagName() shouldn't be capitalized.

It worked for me:

Saira Bottemuller
Saira Bottemuller
Courses Plus Student 1,749 Points

...

facepalms self

Really? REALLY? It has to be that L. I hang my head in shame. Thanks Colin :D

So is there any particular trick to training yourself and your eyeballs to STOP BEING LAZY and pick out silly syntax errors like this? It's really the biggest, most frequent problem I've run into, and even when I pore over a line of code, I miss things like that. Am I the only beginner who has a real problem with lazy syntax? I promise, I really do read things over, but this is like the third time or so that I've asked a question because I'm stumped with something I've been staring at for an hour, and it turns out to be something silly that I've mistyped and somehow not caught even though I've been reading and re-reading my code. I think you've helped me with a lazy syntax thing before, any advice? Haha and from now on, if I ask a question and it's something like that you notice in my code, just tell me YOU ARE LAAAAAAAAAAZY go back and find what you mistyped! :D :D :D I really do appreciate your help and patience.

Colin Bell
Colin Bell
29,679 Points

Am I the only beginner who has a real problem with lazy syntax?

Haha, absolutely not. I'd say the most common mistakes among beginners are simple syntax errors. We're so used to red squigglies letting us know that we've messed up (at least I know that I am) that it takes some getting used to having to find our own mistakes.

I think you've helped me with a lazy syntax thing before, any advice?

Honestly, it's just repetition. I like to do exercises in a console because then you get the specific JavaScript error every time (They show you sometimes in the lessons, but you occasionally you just get the "Bummer, did you make sure you did what we asked?" type of answer, which isn't too helpful). After a while I was able to quickly associate certain errors with some of my more common problems. That would be my recommendation.

Adam Duffield
Adam Duffield
30,494 Points

I think you might be better off trying to get the "full names" last child, might wanna Google the function for it I don't know it off the top of my head :) hope this helps.

Saira Bottemuller
Saira Bottemuller
Courses Plus Student 1,749 Points

So I looked on MDN, and what I found was node.lastChild, which I don't think will work in the Challenge Quiz since it's looking for a specific statement, but in general when trying to achieve the same result - selecting the second span, for instance - would node.lastChild work? MDN gives the syntax as:

```var last_child = element.lastChild

Saira Bottemuller
PLUS
Saira Bottemuller
Courses Plus Student 1,749 Points

D: That makes sense. I think that's what I was grasping around for, Colin - I thought I might need the "span" in quotes, but I didn't realize that the [1] needed to be outside the quotes and parentheses! D: .......... :D Thank you both so much for your help!!! :D

Adam Duffield
Adam Duffield
30,494 Points

My bad I didn't read the title correctly I just though you was after a fix not an answer to the challenge :) but either way you've fixed it and learnt a new function!

Saira Bottemuller
Saira Bottemuller
Courses Plus Student 1,749 Points

Hey no worries! I am so glad you stopped in to help, you definitely taught me something new. :D I feel best when I have multiple avenues open to me, and I think it's something that will really come in handy for the future. I appreciate you! :)