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

Posted by Micah Dunson
Micah Dunson
34,368 Points

Having trouble selecting elements to variables

I'm having trouble solving the second part of this quiz. I'm able to solve the first part ok but the answer I come up for the second part in not correct and I can't seem to figure out what I'm doing wrong.

Here's the problem:

1) Select the H1 tag with the id of full_name and assign it to the variable fullName on line 1. Take a look in the index.html to see the structure of the document

#2) Select the second SPAN element on the page and assign it to the variable 'lastName' on line 2.

(HTML)

<body> <h1 id="full_name"><span class="first_name">Andrew</span> <span class="last_name">Chalkley</span></h1>

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

</body>

(JS) below are variables with my answers

1 var fullName = document.getElementById("full_name"); 2 var lastName = document.getElementByTagName("last_name")[1];

1 is correct but not #2

Can anyone explain to me what I'm missing? Much appreciated.

Christopher Rebacz
Christopher Rebacz
10,904 Points

Since you are using getElementByTagName, you need to pass the tag within the function parameters, not the id of the element. For example,

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

or if there is an id of "last_name" on the span, then you would be able to do:

var lastName = document.getElementById('last_name');

5 Answers

Micah Dunson
Micah Dunson
34,368 Points
Micah Dunson
Micah Dunson
34,368 Points

Thanks. I actually tried "span" earlier and it didn't work but I know why now. The reason....I forgot to put the "s" on ElementsByTagName. Always the little things. Thanks again

Marcin Robert Kaźmierczak
Marcin Robert Kaźmierczak
33,570 Points
Marcin Robert Kaźmierczak
Marcin Robert Kaźmierczak
33,570 Points

Try this 

var fullName=document.getElementById("full_name"); 
var lastName=document.getElementsByTagName("span")[1];
Gard Mikael Fjeldavli
Gard Mikael Fjeldavli
19,416 Points
Gard Mikael Fjeldavli
Gard Mikael Fjeldavli
19,416 Points

span is not the elements ID, but the element itself. so try getting it by using the tag name.

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

As you probably see the getElementsByTagName function returns a list of elements with that tag, you then have to choose (the 0-indexed) value in that list to retrieve the element you want. =)

Chris Martinez
Chris Martinez
11,715 Points
Chris Martinez
Chris Martinez
11,715 Points

i i also found success with getElementsByClassName("last_name")[0];

it wasn't in the instructions, but i say the option ont he mozilla DOM website. any reason why i shouldn't do this, instead?

maratfaizov
maratfaizov
14,228 Points
maratfaizov
maratfaizov
14,228 Points

I know this won't go through on this task, but i also found solution with Get all elements that have a class of 'test', inside of an element that has the ID of 'main'

var lastName = document.getElementById("full_name").getElementsByClassName("last_name");