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

Farnoosh M
Farnoosh M
10,921 Points

html elements disappear when the script runs

Hi!

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
  recordBox.setAttributeNode(attr);
  // add the created div to the output div on the page
  output.appendChild(recordBox);

 /************************************************* 
  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!
      break;
    }

  } //end of for loop


// the name wasn't found in the array
  if(!searchKeyFound){

       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>
<html>

<head>
    <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">

</head>

<body>
    <div class="container-fluid">
        <header>
            <!-- 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>
        </header>

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

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

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

  </body>
</html>

2 Answers

Henrik Hansen
Henrik Hansen
23,176 Points

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