title: Show hidden div on form submit (javascript & PHP)
body: <p>I'm trying to create a number guessing game:</p>
  
  <pre><code>&lt;?php
      $num = rand(1,1000);
      $guess = $_POST["guess"];
  ?&gt;
  
  &lt;div class="intro"&gt;We've generated a random number between 1 and 100. Give us your best guess!&lt;/div&gt;
  
  &lt;form action="index.php" method="post"&gt;
      &lt;input type="text" name="guess"&gt;
      &lt;input type="submit" value="Guess!" onsubmit="showHide()"&gt;
  &lt;/form&gt;
  
  &lt;div class="guess-text"&gt;Your guess was &lt;span class="guess-var"&gt;&lt;?php echo $guess; ?&gt;&lt;/span&gt;&lt;/div&gt;
  
  &lt;div class="echo" id="hidden_div&gt;
  &lt;?php
      if ($guess &gt; $random) {
      echo "Sorry, too high! Better luck next number!";
      }
  
  elseif ($guess &lt; $random) {
  echo "Sorry, too low! Better luck next number!";
      }
  
  else {
      echo "&lt;script type='text/javascript'&gt;location.href='/youwin.html'&lt;/script&gt;";
  }
  ?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the div that displays the result     </p>
  
  <pre><code>&lt;div class="echo" id="hidden_div"&gt;
  </code></pre>
  
  <p>to be hidden until after the form is submitted. Here is the only code I've been able to find that helps me out:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function showHide() {
          var div = document.getElementById("hidden_div");
          if (div.style.display == 'none') {
              div.style.display = '';
          }
  
          else {
              div.style.display = 'none';
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Unfortunately, this is only hiding the div. I need some help to ensure that the div will reappear after a guess is submitted. Thanks.</p>