Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Interactive Web Pages with JavaScript Selecting Elements and Adding Events with JavaScript Selecting Elements

Val Nunez
Val Nunez
2,763 Points

document.getElementByTagName doesn't seem to be working with second SPAN last_name? Not sure what I'm doing wrong, gosh.

Am I missing something? I probably am, haha! Oh man, any help would be greatly appreciated, thank you in advance!

app.js
var fullName = document.getElementById("full_name");
var lastName = document.getElementsByTagName("last_name");
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>
Cheo R
Cheo R
37,150 Points

From the MDN examples:

<!DOCTYPE html>
<html>
<head>
  <title>getElementById example</title>
  <script>
  function changeColor(newColor) {
    var elem = document.getElementById("para1");
    elem.style.color = newColor;
  }
  </script>
</head>
<body>
  <p id="para1">Some text here</p>
  <button onclick="changeColor('blue');">blue</button>
  <button onclick="changeColor('red');">red</button>
</body>
</html


element = document.getElementById() : 

element : a reference to an Element object, or null if an element with the specified ID is not in the document.

id : a case-sensitive string representing the unique ID of the element being sought.

Where element would contain other stuff. Applying the example to your example:

var fullName;
var lastName;

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



<!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>

Where fullName is an element that contains other stuff. So instead of calling getElementsByTagName on document, you call it on fullName. But just doing that won't it because you get a list of span objects, hence you need to select the second one at index [1].

2 Answers

ALBERT QERIMI
ALBERT QERIMI
49,872 Points

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

Val Nunez
Val Nunez
2,763 Points

Thank you for your help! :)

Allison Hanna
Allison Hanna
36,222 Points

The tag name is <span> and the class name is last_name. Perhaps you want to use document.getElementsByClassName, var lastName = document.getElementsByClassName("last_name");

Val Nunez
Val Nunez
2,763 Points

Thank you very much for the help! It doesn't make sense to me yet, but I will keep practicing!