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 Solution

Devjyoti Ghosh
Devjyoti Ghosh
2,422 Points
Posted by Devjyoti Ghosh
Devjyoti Ghosh
2,422 Points

Problem with print function

https://w.trhou.se/hr3yrzquh0

In my student.js file the print function is not working. It is showing me the following error in the JavaScript console 

students.js:4 Uncaught TypeError: Cannot set property 'innerHTML' of null***
    at print (students.js:4)
    at students.js:44
print   @   students.js:4
(anonymous) @   students.js:44

2 Answers

Shadab Khan
Shadab Khan
5,470 Points
Shadab Khan
Shadab Khan
5,470 Points

Hi Devjyoti,

Why have you got script tag twice in your HTML file? Do you wanna try removing one and see how you go. I'd advice to remove the one in the <head> section. JavaScript needs the entire document to be loaded before it can access the DOM elements, and by putting the script tag just before the end of body tag just does that.

Let me know if that helps. All the best.

Devjyoti Ghosh
Devjyoti Ghosh
2,422 Points
Devjyoti Ghosh
Devjyoti Ghosh
2,422 Points

Hi Shadab removing the 2 calls to students.js file helped solve the print error but now it's only showing me the value student[0].nameOfStudent its not showing the rest of the information. It is not running the for loop.

Shadab Khan
Shadab Khan
5,470 Points
Shadab Khan
Shadab Khan
5,470 Points

Hi Devjyoti,

Replace everything starting from your for loop by below code:

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

var student = [
  {
    nameOfStudent: 'Dev',
    track: 'JavaScript',
    achievements: 2,
    points: 1000 
  },
  {
    nameOfStudent: 'Sarah',
    track: 'iOS',
    achievements: 7,
    points: 4000
  },
  {
    nameOfStudent: 'Hayley',
    track: 'HTML',
    achievements: 1,
    points: 1
  },
  {
    nameOfStudent: 'Alex',
    track: 'iOS, Android, Ruby',
    achievements: 10,
    points: 10000
  },
  {
    nameOfStudent: 'ope',
    track: 'CSS',
    achievements: 5,
    points: 100
  }  
];

var finalString = '';

for (var i = 0;i < student.length;i+=1) 
{
  finalString += '<p><strong>Student: ' + student[i].nameOfStudent + '</strong></p>' +
                  '<p>Track: ' + student[i].track + '</p>' +
                  '<p>Achievements: ' + student[i].achievements + '</p>' +
                  '<p>Points: ' + student[i].points + '</p>';
}

print(finalString);

Pay close attention to my for loop vs yours. In your case you are invoking the print function again and again, and in my case you can see that I have first generated the entire result in a string - finalString, and then passed it to the print function as : print(finalString) in the last line.

Also using print function again and again will overwrite any previous content of the element, that is why you got the value of student[0].nameOfStudent because print('<p>'+student[0].nameOfStudent+'</p>'); was the last line in your code and it was last to be called, so it basically overwrote anything that was there before in that DOM element.

Hope that helps. All the best!

Devjyoti Ghosh
Devjyoti Ghosh
2,422 Points
Devjyoti Ghosh
Devjyoti Ghosh
2,422 Points

Okay i got the problem but I am not sure why the print function is overwriting all that has being written before it? Is it because modern browsers run the whole JavaScript file at once before writing stuff to HTML? So only the last instance of print function is being shown?