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

Alex Franklin
Alex Franklin
12,397 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
14,855 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,397 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
14,855 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