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

Pol Bachelin
Pol Bachelin
1,294 Points
Posted by Pol Bachelin
Pol Bachelin
1,294 Points

Why is my code now showing anything?

When I preview my code, nothing is shown. I looked in the console to see if there was any errors but there is nothing. Please tell me why nothing is showing!!

var students = [ 
  {
    name: 'Dave',
    Track: 'Java',
    Achievements: 10,
    Points: 1000
  },
  {
    student: 'Annah',
    Track: "HTML",
    Achievements: 13,
    Points: 3.400
  },
  {
    student: 'Franck',
    Track: 'Front End Developmnent',
    Achievements: 2,
    Points:450
  },
  {
    name: 'Brian',
    Track: 'Ruby',
    Achievements: 34,
    Points: 40000
  },
  {
    name: "Nathan",
    Track: "C#",
    Achievements: 20,
    Points: 5.800
  }

];

var message = '';
var student;


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

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

2 Answers

Ben Ragsdale
Ben Ragsdale
14,187 Points

There are a few issues.

The first is the variable in the function:

      var outputDive = document.getElementById('output'); 
  outputDiv.innerHTML = message;

Notice the var is defined 'outputDive' but on the next line is 'outputDiv'.

Change to: 

      var outputDiv = document.getElementById('output');

The other issue is the names in the object versus the names in the function: 

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

Notice that in the function, you ask for 'student.name' and 'student.track' . But in array object, your names are sometimes capitalized and sometimes different:

var students = [ 
  {
    name: 'Dave',
    Track: 'Java',
    Achievements: 10,
    Points: 1000
  },
  {
    student: 'Annah',
    Track: "HTML",
    Achievements: 13,
    Points: 3.400
  },

In the above example, the first object name is correct, but then you capitalize 'Track' and 'Achievements' and 'Points'. They need to be lowercase. Also, in the second object, your write " student:'Annah' ". It should be " name:'Annah' "

This is what the array should look like:

var students = [ 
  {
    name: 'Dave',
    track: 'Java',
    achievements: 10,
    points: 1000
  },
  {
    name: 'Annah',
    track: "HTML",
    achievements: 13,
    points: 3.400
  },
  {
    name: 'Franck',
    track: 'Front End Developmnent',
    achievements: 2,
    points:450
  },
  {
    name: 'Brian',
    track: 'Ruby',
    achievements: 34,
    points: 40000
  },
  {
    name: "Nathan",
    track: "C#",
    achievements: 20,
    points: 5.800
  }

];
Pol Bachelin
Pol Bachelin
1,294 Points
Pol Bachelin
Pol Bachelin
1,294 Points

Thank you so much! Sorry for the trouble and all the errors it is my first language...

Ben Ragsdale
Ben Ragsdale
14,187 Points

No problem, it's good practice for me! Would you mind marking my answer as correct or giving me an upvote? Thanks!