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!

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

Farnoosh M
Farnoosh M
10,921 Points

html elements disappear when the script runs


When I run the script to get the prompt, all the html text disappears from the page.

My script tag is at the end of the html before the closing body tag. But when I load the page, I see only my header image and every h1, h2 and p tag that I have put in the html is wiped out and I only get the prompt on an empty page. When I comment the prompt line in the script, the page shows normally.

The javascript itself runs just fine and the page shows correctly when I search something with the prompt or just cancel the prompt.

This is the link to the page to show what I mean.

  // Where to show the records
  var output = document.getElementById('output');

   students records: an array of objects

  var students = [
           name: 'Farnoosh Mohri',
           track: 'Full Stack Javascript',
           achievements: 45,
           points: 3705

      , {
          name: 'Brandon McFarland',
          track: 'Frontend Development',
          achievements: 36,
          points: 2083

      , {
          name: 'Nicole Stardust',
           track: 'Graphic Design',
           achievements: 45,
           points: 3705
        , {
          name: 'Shanon Goldwings',
           track: 'Web Design',
           achievements: 90,
           points: 6502
           , {
          name: 'Ashton Warrior',
           track: 'Game Design',
           achievements: 45,
           points: 8470


A place to show the search results

  var recordBox = document.createElement('DIV');
  //create a class attribute
  var attr = document.createAttribute('class');
  //  give the class attribute a name value
  attr.value = 'recBox';
  //give that class attribute to the created div elm
  // add the created div to the output div on the page

  Prompt the user for the search key

var searchKey = prompt('Search a students by first and last name, seperated by space.');
// keep search key as normal case and use sKey in the loop

var searchKeyFound = false;

  Search the students records

/* if the user DID enter something in the prompt. (because if the user don't put anything
 in the prompt and clicked 'cancel' the value will be null and if they click 'ok' the value
 will be an empty string */
if(searchKey!==null && searchKey!==''){
  for (var i=0; i<students.length; i++){
    // If the name exists (search everything in lowercase version)
     if(searchKey.toLowerCase() === students[i].name.toLowerCase() ){

      // show the records for that search;
      recordBox.innerHTML= '<p>'+'<span> Name: </span>'+students[i].name + 
' | '+'<span> Track: </span>'+ students[i].track +' | '+'<span> Achievements: </span>'+
 students[i].achievements+' | '+'<span> Points: </span>' + students[i].points+'</p>';

      // search key exists
      searchKeyFound = true;
      // exit the loop as soon as the name is found 
      // everything that comes after the break in the loop won't run!

  } //end of for loop

// the name wasn't found in the array

       recordBox.innerHTML= '<p> Sorry! '+ searchKey  + ' is not registered with us. </p>'; 

}// end of first if
  /* the user didn't enter anything in the prompt and clicked 1.cancel or 2.ok 
  if(searchKey===null || searchKey==='')
else {
   recordBox.innerHTML= '<p> You didn\'t search a student. </p>'; 


And this is the html:

<!DOCTYPE html>

    <meta charset="UTF-8">
    <title>Student Record App</title>

    <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

    <link rel="stylesheet" href="css/style.css">


    <div class="container-fluid">
            <!-- Site Banner -->
            <img class="img-responsive page-banner" src="img/banner-education.jpg">
            <a href='http://www.freepik.com/free-vector/back-to-school-banners_803108.htm'><span class= page-banner>Illustration Designed by Freepik<span></span></a>

        <h1> Student Record| Working with Objects</h1>

        <div id="introText">
           <p>Student records will be shown here:</p>

       <!-- This is where the results will be shown by js  -->
        <div id="output"></div>
        <script src="js/app.js"></script>


2 Answers

Henrik Hansen
Henrik Hansen
23,176 Points

Perhaps you set the .innerHTML() on the wrong element?