title: Show random div onclick
body: <p>I am making a little project. For this project I want to be able to show a div to visitors of my site. However, I want my content to be varying. I've created three divs, all with a different id. When someone enters my site, I want him/her to see just one of the three divs. I've created some code that I thought would do the trick, but obviously it did not. I would really appreciate it if someone could tell me where I'm doing it wrong. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="one"&gt;
  1
  &lt;/div&gt;
  
  &lt;div id="two"&gt;
  2
  &lt;/div&gt;
  
  &lt;div id="three"&gt;
  3
  &lt;/div&gt;
  
  &lt;input type="button" id="Button" value="Random" onclick="RandomDiv();" /&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#one {
      display:none;
  }
  
  #two {
      display:none;
  }
  
  #three {
      display:none;
  }   
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>function RandomDiv() {
      var myarray= new Array("one","two","three");
      var ChosenDiv = myarray[Math.floor(Math.random() * myarray.length)];
      alert(ChosenDiv); //Just to show this.
      document.getElementbyId(ChosenDiv).style.display="inline-block";
  }
  </code></pre>
  
  <p>Now, the alert seems to work fine, so that means that there is no problem in deciding the "ChosenDiv" (one, two or three). However, when I want to make that chosen div visible (<code>display:none</code> -> <code>display:inline-block</code>), it simply won't do this. I tried to use Google Chrome for defining the problem, but I can't tell what the problem is. </p>