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

Posted by shu Chan
shu Chan
2,951 Points

Getting an element from className and using alerting the last element in an array

Hello! I'm having trouble understanding why my code responds with "undefined"

Here is my code:

HTML portion 

<h2>
  List of People:
</h2>

<ul class='people'>
  <li class='name'>
    Clara
  </li>
  <li class='name'>
    James
  </li>
  <li class='name'>
    Sara
  </li>
</ul>

JS portion 

var names = [];
var elm = document.getElementsByClassName('name');
names.push(Array.from(elm).map(p => p.textContent));
alert(names[2]);

Here is my logic

var names = []; - I'm creating a an empty array

var elm = document.getElementsByClassName('name'); - I'm getting elements using the className 'name'

names.push(Array.from(elm).map(p => p.textContent)); - I'm converting the elements into text and pushing it onto the empty array 'names'

alert(names[2]) - I am alerting the last element ("Sara")

But the outcome is undefined =(
I know the error is due to my less than perfect understanding of the array.map function but for the life of me I can't figure out what I'm doing wrong, please someone help!

4 Answers

0yzh 󠀠
0yzh 󠀠
17,276 Points

Hi Shu,

The reason your 'alert(names[2])' call is returning undefined is because your .map call returns an array which contains the three names ['Clara', 'James', 'Sara']. This array is then being pushed into the empty array assigned to 'names', this means if you wanted to access 'Sara', you would actually have to access the inner array(returned from map()):

alert(names[0][2]);  // alerts 'Sara'

There are a few ways to fix this but this just a quick explanation. Hope this helps!

shu Chan
shu Chan
2,951 Points
shu Chan
shu Chan
2,951 Points

Hey Huy, thanks for the answer, however I don't understand, why would I have to access the inner array (from the array.map function) to access the element 'Sara' when I pushed that element to the empty array already.

what's the reasoning behind this?

0yzh 󠀠
0yzh 󠀠
17,276 Points

Hey Shu,

The reason is because you've now created a multi-dimensional array when you pushed the array that was returned from .map into the empty array assigned to 'names'. So now your array structure looks like this:

var names = [] ; // single empty array
names.push(Array.from(elm).map(p => p.textContent)); // an NEW array is returned and pushed into the empty array

// now 'names' looks like this
names = [['Clara', 'James', 'Sara']];

So now you have single item in your 'names' array therefore calling names[2] would return undefined since there is no 3rd item in 'names' array, that 3rd item you are trying to access exists in the inner array. This is why you would need to access that inner array if you wanted to alert 'Sara'.

james south
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,271 Points
james south
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,271 Points

you can fix by just assigning the array.from/map operation to names, instead of pushing it into names. now names is an array with 3 elements, the 3 names. you can also skip names altogether and just alert from elm, as in elm[2].textContent.

to answer your 2nd question: your code converts the HTMLCollection returned by getElementsByClassName into an array, then mutates the contents from HTML elements to their text content. this array is then pushed into the names array. so names now has a length of 1, and that element is the array of 3 names. so to access you would use the 0 index to get this array-in-an-array, then get element 2.

shu Chan
shu Chan
2,951 Points
shu Chan
shu Chan
2,951 Points

Hey James, that's a very elegant answer! Thank you!

I'm doing things in this very arbitrary way because I am doing an exercise which requires me to push elements into an empty array.