title: javascript hide div on page load until if statement condition selects div
body: <p>Ive got two div's on a webpage, which need to be hidden from page load until the if statement in the script block dictates when the div is to be displayed..is this possible and how can it be done? 
  i have a jQuery linked but what i've tried doesnt work </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
          body {
              background-color: #3da9cd;
              background:url('background.jpg');
              height: 50%;
              width: 50%;
              margin:0;
              padding: 0;
              overflow:auto;
          }
          h1 {
              font-size: 34px;
              margin: 0;
              padding: 0;
              font-family: Georgia, "Times New Roman", Times, serif;
              font-weight: bold;
              color: #000000;
          .hidden { display: none; }
          .shown {display:block;}
  }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
  
  
  function WinLose()
  {
      $("#win").hide();
  $("#lose").hide();
      var x=document.getElementById("demo");
      x=x.innerHTML=Math.floor((Math.random()*5)+1);
  
      if (x==5)
      {
          $('#win').show()
  
      }
      else 
      {
          $('#lose').show()
      }
  
  }
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;p id="demo"&gt;&lt;/p&gt;
  
  &lt;button onclick="WinLose()"&gt;Try it&lt;/button&gt;
  
  &lt;!-- Win element --&gt;
          &lt;div id="win" class="hidden"&gt;Congratulations! You have won a prize. *UNIQUE CODE* Collect your prize from the Customer Services desk&lt;/div&gt;
  
          &lt;!-- The losing image div --&gt;
          &lt;div id="lose" class="hidden"&gt;Sorry, you have not won. Better luck next time&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>