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 Student Record Search Challenge Solution

Alex Franklin
Alex Franklin
12,401 Points

The Student Record Search Challenge Solution - program works but nothing is printing to the document after quit help!!

I can't find any difference between my code and the final code in the video, but when my program breaks, or ends, nothing is printed to the document page and I can't figure out why!

Will someone please code-check me here and let me know where I've gone wrong?! thanks for any help in advance it means a lot!

THE JAVASCRIPT:

var message = "";

var student;

var search;

var flag = true;

function print(message) {

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

outputDiv.innerHTML = message;

}

function getStudentReport ( student ) {

var report ='<h2>Student: ' + student.name + '</h2>';

report += '<p>Track: ' + student.track + '</p>';

report += '<p>Track: ' + student.achievements + '</p>';

report += '<p>Track: ' + student.points + '</p>';

return report;

}

while (true) {

search = prompt('Search student records: type a name [Jody] (or type "quit" to exit).');

if (search === null || search.toLowerCase() === 'quit'){

break;

}

for ( var i = 0; i < students.length; i += 1 ) {

student = students[i];

if ( student.name === search ) {

  message = getStudentReport( student );

  print(message);

}

}

}

Kevin Gates
Kevin Gates
15,052 Points

Hi buddy, I'd like to help, but can you do a couple of things for me? First Thing Edit your question and use the Markdown Cheatsheet (usually listed below the comment / question box)

For instance, you can use backticks (to the left of the number 1 on a keyboard which look like this: ` ) to keep your could bundled together. 3 backticks before and after your code will encapsulate it and make it readable

backtick backtick backtick

Your Code

backtick backtick backtick

Also, if you add the language you're using (HTML, CSS, JavaScript), then it'll make it prettier.

backtick backtick backtick JavaScript

Your Code

backtick backtick backtick

Therefore you go from this:

function getStudentReport ( student ) { var report ='<h2>Student: ' + student.name + '</h2>'; report += '<p>Track: ' + student.track + '</p>'; report += '<p>Track: ' + student.achievements + '</p>'; report += '<p>Track: ' + student.points + '</p>'; return report; }

To this:

function getStudentReport ( student ) {
  var report ='<h2>Student: ' + student.name + '</h2>';
  report += '<p>Track: ' + student.track + '</p>';
  report += '<p>Track: ' + student.achievements + '</p>';
  report += '<p>Track: ' + student.points + '</p>';
  return report;
}

The Second Thing is to please attach the HTML of your question as well, as it's not possible to test without it.

Alex Franklin
Alex Franklin
12,401 Points

Kevin Gates :

Hi, Kev! Thank you for the quick response and tips on how to post more readable questions (which no doubt produces quicker, and higher quality responses).

I have included my code in the proper formatting below and am looking forward to hearing back about what I'm missing. Thank you so much again for the help and Happy New Year, man:)

FIRST,

Here's a link to the HTML: https://codepen.io/alex-franklin/pen/LMzyXe.html

Here's a link to the JavaScript: https://codepen.io/alex-franklin/pen/LMzyXe.js

AND BELOW SHOULD BE BOTH ;)

====BEGIN 2 JAVASCRIPT FILES===============

JAVASCRIPT = "students.js"

var students = [

  {
    name: 'Alex',
    track: 'Front End Web Development',
    achievements:'69',
    points:'5497',
  },

  {
    name: 'Dave',
    track: 'Full Stack JS',
    achievements:'158',
    points:'14730',
  },

  {
    name: 'Jordan',
    track: 'Back End Dev',
    achievements:'56',
    points:'2497',
  },

  {
    name: 'John',
    track: 'Front End Web Development',
    achievements:'88',
    points:'6497',
  },

  {
    name: 'Jody',
    track: 'Learn WP',
    achievements:'39',
    points:'1497',
  }

];

JAVASCRIPT = "student_report.js":

var message = "";
var student;
var search;



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



function getStudentReport ( student ) {
  var report ='<h2>Student: ' + student.name + '</h2>';
  report += '<p>Track: ' + student.track + '</p>';
  report += '<p>Track: ' + student.achievements + '</p>';
  report += '<p>Track: ' + student.points + '</p>';
  return report;
}




while (true) {
  search = prompt('Search student records: type a name [Jody] (or type "quit" to exit).');
  if (search === null || search.toLowerCase() === 'quit'){
  break;
  }
  for (var i = 0; i < students.length; i += 1) {
  student = students[i];
    if ( student.name === search ) {
      message = getStudentReport( student );
      print(message);
    }
}
}

========/ 2 JAVASCRIPT FILES==========================

THE 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/student_report.js"></script>
</body>
</html>

1 Answer

Kevin Gates
Kevin Gates
15,052 Points

Hi there @alexfrankline2 ,

Thanks for updating your code. Much more readable. Per your initial question and my testing on JSFiddle, I get the results to show everytime when I Cancel or "quit" the program.

Are you testing in a Workspace? If not, perhaps a JavaScript error is being thrown.

Do you know how to inspect the JavaScript console to look for errors? Google has a great guide here: https://developers.google.com/web/tools/chrome-devtools/console/

Here's a guide to find the Console in other web browsers: https://www.w3schools.com/js/js_debugging.asp