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

Posted by Linlin Huang
Linlin Huang
2,413 Points

Using multiple JS files doesn't work...

I am trying to complete this exercise by writing an external .js file that generates the report, but for some reason, the other code file isn't read. I know that the program works because if I copy and paste this code inside the students.js file, it works.

edit] here's a snapshot of my workspace: https://w.trhou.se/hfrqfoa2xl

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Students</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>Students</h1>
<div id="output">

</div>
<script src="js/students.js"></script>
<script src="js/report.js"></script>
</body>
</html>

js/report.js

for (var person in students) {
  var line1 = "<p><b> Name: " + students[person].name + "</b></p>"
  var line2 = "<p>Track: " + students[person].track + "</p>"
  var line3 = "<p>Achievements: " + students[person].achievements + "</p>"
  var line4 = "<p>Points: " + students[person].points + "</p>"
  var studentOutputLine = line1 + line2 + line3 + line4 + "</br>"

  output.innerHTML += studentOutputLine
}

js/students.js

var students = [
   {   name: "Linlin"
     , track: "Javascript"
     , achievements: 5
     , points: 1289 
   }

  ,{   name: "TJ"
     , track: "Javascript"
     , achievements: 122
     , points: 223429 
   }
  ,{
      name: "Omar"
     , track: "Ruby"
     , achievements: 23
     , points: 2429 
  }
  ,{
      name: "Jenn"
     , track: "HTML/CSS"
     , achievements: 189
     , points: 2232 
  }
  ,{
      name: "Theresa"
     , track: "Branding"
     , achievements: 49
     , points: 9992 
  }
]

, output = document.getElementById("output")
David Bath
David Bath
25,940 Points
David Bath
David Bath
25,940 Points

I forked your workspace and this seems to work just fine. What happens when you run it? Did you try closing the workspace and reopening it?

1 Answer

Tsenko Aleksiev
Tsenko Aleksiev
3,819 Points
Tsenko Aleksiev
Tsenko Aleksiev
3,819 Points

I really don't get it?! On students.js why do you use the last line of code : ", output = document.getElementById("output")" and why the comma at the start? And in the other file, what do you mean by this: "output.innerHTML += studentOutputLine". Isn't this going to give you null?