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

Val Nunez
Val Nunez
2,763 Points
Posted by 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
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
ALBERT QERIMI
ALBERT QERIMI
49,872 Points

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

Val Nunez
Val Nunez
2,763 Points
Val Nunez
Val Nunez
2,763 Points

Thank you for your help! :)

Allison Hanna
Allison Hanna
36,222 Points
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
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!