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 JavaScript Loops, Arrays and Objects Tracking Data Using Objects The Build an Object Challenge, Part 2

Linda Gomes
Linda Gomes
3,584 Points
Posted by Linda Gomes
Linda Gomes
3,584 Points

Why only the last student appears?

function print(message) {
  var div = document.getElementById('output');
  div.innerHTML = message;
}


for ( var i = 0; i < students.length;  i += 1 ) {
 var list = "<h2>Name: " + students[i].name + "</h2>";
 list += "<p>Track: " + students[i].track;
 list += "<br>Achievements: " + students[i].achievements;
 list += "<br>Points: " + students[i].points + "</p>";
 print(list);
}

I have the array in another .js file to make it easier to read. When I preview the page only the last student appears, with all the information correctly displayed, instead of all the 5 students. I don't know what I am doing wrong.

1 Answer

Stephan Olsen
Stephan Olsen
6,650 Points
Stephan Olsen
Stephan Olsen
6,650 Points

If you look at the print function you've created. It targets the div with the ID output. The innerHTML of this div is then set to the message. You're calling this function for every iteration in your for loop, which means that each time it runs through, the innerHTML of your div is replaced with the new message.

To fix this, simply change your function to

function print(message) {
  var div = document.getElementById('output');
  div.innerHTML += message;
}
Linda Gomes
Linda Gomes
3,584 Points
Linda Gomes
Linda Gomes
3,584 Points

Wow such a simple solution... but I don't think I would've got there on my own. Thanks!

Linda Gomes
Linda Gomes
3,584 Points
Linda Gomes
Linda Gomes
3,584 Points

I was just watching the solution video and Dave does pretty much what I did and he doesn't add the + in the div.innerHTML and it still works in the video. So I basically copied the code form the video to test and it doesn't work even though it worked in the video. How? I´m confused now.

Here is the code from the solution video:

var message = "";
var student;

function print(message) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}

for ( var i = 0; i < students.length;  i += 1 ) {
  student = students[i];
  message = "<h2>Student: " + student.name + "</h2>";
  message += "<p>Track: " + student.track + "</p>";
  message += "<p>Achievements: " + student.achievements + "</p>";
  message += "<p>Points: " + student.points + "</p>";
}

print(message);

Sorry for being so annoying but I am really confused.

andren
andren
28,558 Points
andren
andren
28,558 Points

Your copied code is slightly off, namely this line:

message = "<h2>Student: " + student.name + "</h2>";

Is wrong. In the video it looks like this:

message += "<h2>Student: " + student.name + "</h2>";

The difference is that += was used in the video, while = is used in your copied code. That makes a huge difference since the += just adds to the variable while = replaces it outright.

So in the Teacher's solution the loop adds all of the student info to the message variable and then after doing that prints out that completed message using the print function.

In your copied code the message is essentially reset each the the loop runs due to the use of the = operator. Resulting in only the last students info being present in the variable.

Linda Gomes
Linda Gomes
3,584 Points
Linda Gomes
Linda Gomes
3,584 Points

Oh... I see now. I really need to pay more attention to those little (big) details. Or i need a bigger screen haha! Thanks for the patience!