title: My master told us to do the html and JS
body: <p>I made some but I really can't find out how to display the "hidden" images of each box...
  filter the friends list showing the names which match the name being entered by the textbox.
  This is the html part of my code.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;  
      &lt;title&gt;My Memory Game&lt;/title&gt;
      Enter Your Name: &lt;input type="text" id="name" /&gt;
      &lt;input type="button" value="Submit" onclick="ShowWelcomeMessage();"&gt;
  
      &lt;h1 id="title"class="h1"&gt;My Memory Game&lt;/h1&gt;
      &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;   
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;ul style="float:left"&gt;&lt;span style="cursor:pointer" class="game" onclick="Ngame();"&gt;New Game&lt;/span&gt;&lt;/ul&gt;
      &lt;ul style="float:left"&gt;&lt;span style="cursor:pointer" class="about" onclick="about();"&gt;About&lt;/span&gt;&lt;/ul&gt;
  
      &lt;div class="row"&gt;
          &lt;div id="a" class="box"&gt;&lt;/div&gt;
          &lt;div id="b" class="box"&gt;&lt;/div&gt;
          &lt;div id="c" class="box"&gt;&lt;/div&gt;
          &lt;div id="d" class="box"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div id="e" class="box"&gt;&lt;/div&gt;
          &lt;div id="f" class="box"&gt;&lt;/div&gt;
          &lt;div id="g" class="box"&gt;&lt;/div&gt;
          &lt;div id="h" class="box"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
      $("#box_button").click(function(){
          if(!$("#hiddenBox").show()) {
              $("#hiddenBox").show()
          } else {
              $("#hiddenBox").hide();
          }
      });
      &lt;/script&gt;
  
  
      &lt;div class="chatscrollable" style="position:fixed; bottom:80px; right:0px"&gt; 
  
      &lt;!---&lt;div class="chatscrollable" style="right:-1000px; bottom:-150px; position:relative;"&gt; --&gt;
  
      &lt;img src="marianne.jpg"&gt; &lt;a href="https://www.facebook.com/marianne.pua"&gt;Marianne&lt;/a&gt;
      &lt;div align="right"&gt;&lt;font color="green"&gt;Web&lt;/font&gt; &lt;div class= "online"&gt; &lt;/div&gt;&lt;/div&gt;
  
      &lt;img src="warren.jpg"&gt; &lt;a href="http:www.facebook.com/wandoc"&gt;Warren&lt;/a&gt;
      &lt;div align="right"&gt;&lt;font color="green"&gt;Mobile&lt;/font&gt; &lt;div class= "online"&gt; &lt;/div&gt;&lt;/div&gt;
  
      &lt;img src="perry.jpg"&gt; &lt;a href="https://www.facebook.com/perry.cabugao1"&gt;Perry&lt;/a&gt;
      &lt;div align="right"&gt;&lt;font color="green"&gt;Web&lt;/font&gt; &lt;div class= "online"&gt; &lt;/div&gt;&lt;/div&gt;
  
      &lt;img src="claire.jpg"&gt; &lt;a href="http:www.facebook.com/claire.austria"&gt;Claire&lt;/a&gt;
      &lt;div align="right"&gt;&lt;div class= "mobile"&gt; &lt;/div&gt;&lt;/div&gt;
  
      &lt;img src="aj.jpg"&gt; &lt;a href="https://www.facebook.com/aj.garcia.58"&gt;Aj&lt;/a&gt;
      &lt;div align="right"&gt;&lt;font color="green"&gt;Mobile&lt;/font&gt; &lt;div class= "online"&gt; &lt;/div&gt;&lt;/div&gt;
  
      &lt;img src="rj.jpg"&gt; &lt;a href="https://www.facebook.com/rowlandjasper"&gt;Rj&lt;/a&gt;
      &lt;div align="right"&gt;&lt;font color="green"&gt;Mobile&lt;/font&gt; &lt;div class= "online"&gt; &lt;/div&gt;&lt;/div&gt;
  
      &lt;img src="nona.jpg"&gt; &lt;a href="https://www.facebook.com/nonagabrielle"&gt;Nona&lt;/a&gt;
      &lt;div align="right"&gt;&lt;font color="green"&gt;Mobile&lt;/font&gt; &lt;div class= "online"&gt; &lt;/div&gt;&lt;/div&gt;
  
      &lt;input type="text" id="name" /&gt;
  </code></pre>
  
  <p>And this is the functions in the JS:</p>
  
  <pre><code>function ShowWelcomeMessage() 
  {
      var name = document.getElementById("name").value;
      document.getElementById("title").innerHTML = name+ "'s Memory Game";
  }
  
  function about() 
  {
      var name = document.getElementById("name").value;
      alert("This game is made by " + name + ". Copyright 2014")
  }
  
  function Ngame()
  {
  document.getElementById("a").style.backgroundImage = "url('frozen.jpg')";
  document.getElementById("b").style.backgroundImage = "url('frozen.jpg')";
  document.getElementById("c").style.backgroundImage = "url('frozen.jpg')";
  document.getElementById("d").style.backgroundImage = "url('frozen.jpg')";
  document.getElementById("e").style.backgroundImage = "url('frozen.jpg')";
  document.getElementById("f").style.backgroundImage = "url('frozen.jpg')";
  document.getElementById("g").style.backgroundImage = "url('frozen.jpg')";
  document.getElementById("h").style.backgroundImage = "url('frozen.jpg')";
  }
  </code></pre>