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

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

How is this working?

I understand the solution for the situation when the searched name doesn't exist is this

if (document.getElementById('empty').innerHTML === " ") { 
    print("Sorry, we don't find " + search + " in the list."); 

}

What's the meaning of this and how does this work? Why do we compare the content of the div with an empty string since the div's content is already empty? Thank you!

2 Answers

Steven Parker
Steven Parker
215,939 Points

Where did you find that code? I didn't see it in the video.

:point_right: Perhaps the element ID should be "output" instead of "empty".

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

Oh. Sorry. I named my ID empty as I am using Sublime, not the work space. So the code is the same. I just don't understand the solution to this situation... is not presented in the video, Dave said we should find it on our own. The html code is:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Color Blocks</title>
  <link rel="stylesheet" href="css/styles.css"> 

</head>
<body id="color">

 <div id="empty"></div>


<script src="js/script.js"></script>
</body>
</html>

and the JS code is.

var students = [

  {name: "Ana", track: "Ios", achievements: 88, points: 1346},

  {name: "Silvia", track: "Js", achievements: 56, points: 421},

  {name: "Flavius", track: "Wordpress", achievements: 87, points: 2456},

  {name: "Iorgos", track: "Java", achievements: 74, points: 489},

  {name: "Nik", track: "Ruby", achievements: 42, points: 774}

];


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


function print(message) {
    var emptyDiv = document.getElementById("empty");
    emptyDiv.innerHTML = message;
}

function getStudentReport (student){

            var report = '<h2>Student: ' + student.name + '</h2>';
            report += '<p>Track: ' + student.track + '</p>';
            report += '<p>Points: ' + student.points + '</p>';
            report += '<p>Achievements: ' + student.achievements + '</p>';
            return report;

}



while(true) {

    var search = prompt("Type a name student's name to search or type 'quit' to exist the program!" );

    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);


    } 

};


if (document.getElementById('empty').innerHTML === "") { 
    print("Sorry, we didn't find " + search + " in the list."); 

}
}

How exactly the last if statement work so it displays the "Sorry, we didn't find " + search + " in the list." if our searched item is not in the list. Thank you!