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

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points
Posted by 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
229,732 Points
Steven Parker
Steven Parker
229,732 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
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!