Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript Loops, Arrays and Objects Tracking Data Using Objects The Build an Object Challenge, Part 2 Solution

Dorota Parzych
Dorota Parzych
5,706 Points

code is not working

When I run my code nothing appears in the consol. Can somebody tell me why? Both js scripts are attached to the html file. Thanks in advance!

student_report.js

var message = '';
var student;

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

}

for(var i=0; i<student.length; i++){
  message += '<h2> Student: '+student[i].name+'</h2>';
  message += '<p> Track: ' + student[i].track + '</p>';
  message += '<p> Achievments: ' + student[i].achievments + '</p>';
  message += '<p> Points: ' + student[i].points + '</p>';

}
print(message);

student.js

var students =[
  {name : 'Julia',
   track : 'Front end deevelopment',
   achievments : 5,
   points : 7896},

  {name : 'Max',
   track : 'IOS',
   achievments : 2,
   points : 696

  }


];

1 Answer

Maybe you are used to python or something similar.

In javascript, if you want to log something to the console, you have the command console.log()

for example console.log('hello world')

of course, you can log pieces of code, variables, strings, anything, as long as it's valid javascript.

Dorota Parzych
Dorota Parzych
5,706 Points

Hi! The problem is that I'v copied out this code :( And console.log is not going to work out for me because I want it to appear in the window not in the console.

ow, I see, you want it to appear in the browser. Hmm, let me see.

ok so if you open your html in the browser and press F12 (in chrome) you will see the console, which will show you the following error:

Uncaught TypeError: Cannot read property 'length' of undefined
    at student_report.js:10

this is because student, even though it's declared, doesn't have a value, and therefore no length. I think you may mean to refer to students, so you'd need to import students.js.

You would need to export it from students.js, then import it in student_report.js, like so:

students.js

export var students = [ 
  { 
   name: 'Dave',
    track: 'Front End Development',
    achievements: 158,
    points: 14730
  },
  {
    name: 'Jody',
    track: 'iOS Development with Swift',
    achievements: '175',
    points: '16375'
  },
  {
    name: 'Jordan',
    track: 'PHP Development',
    achievements: '55',
    points: '2025'
  },
  {
    name: 'John',
    track: 'Learn WordPress',
    achievements: '40',
    points: '1950'
  },
  {
    name: 'Trish',
    track: 'Rails Development',
    achievements: '5',
    points: '350'
  }
];

student_report.js

var message = '';
import { students } from './students.js';

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

}

for(var i=0; i<students.length; i++){
  message += '<h2> Student: '+students[i].name+'</h2>';
  message += '<p> Track: ' + students[i].track + '</p>';
  message += '<p> Achievments: ' + students[i].achievments + '</p>';
  message += '<p> Points: ' + students[i].points + '</p>';

}
print(message);

finally, the browser needs to know they're a module, otherwise it will still not work:

so the html needs to account for that:

<!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" type="module"></script>
<script src="js/student_report.js" type="module"></script>
</body>
</html>
Dorota Parzych
Dorota Parzych
5,706 Points

Now it makes sense! Thanks! Just one more question... how does the type="module" work? What's it's purpose?

It's for to declaring a script as a module.

You can only use import and export statements inside modules; not regular scripts. It would throw an error if you didnĀ“t include this step.

MDN article on modules