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

Dorota Parzych
Dorota Parzych
5,706 Points
Posted by 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

Zimri Leijen
Zimri Leijen
11,835 Points
Zimri Leijen
Zimri Leijen
11,835 Points

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
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.

Zimri Leijen
Zimri Leijen
11,835 Points

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

Zimri Leijen
Zimri Leijen
11,835 Points

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
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?

Zimri Leijen
Zimri Leijen
11,835 Points

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