title: Modify CSS file using Math.Random();
body: <p>I am trying to have a background image changed using</p>
  
  <blockquote>
    <p>Math.floor((Math.random());</p>
  </blockquote>
  
  <p>One of the line in my CSS file which is called within my HTML file is:</p>
  
  <pre><code>.slider { width: 990px;  height: 378px; position: relative;  background: url(images/slide-img.png) no-repeat 0 0;}
  </code></pre>
  
  <p>What I am looking to do is use the following statement to get a random number from 1 to 4 and display different background images based on the number retrieved randomly. So I decided to delete the above line from the CSS file and add the following code in my HTML file:</p>
  
  <pre><code>var randomNumber = Math.floor((Math.random()*4)+1); // random number (no more than 4 or the array will be out of bounds)
  if (randomNumber == 1) {
      document.write ('&lt;style&gt;.slider { width: 990px;  height: 378px; position: relative;  background: url(images/slide-img.png) no-repeat 0 0;}&lt;/style&gt;');
  }
  if (randomNumber == 2) {
      document.write ('&lt;style&gt;.slider { width: 990px;  height: 378px; position: relative;  background: url(images/slide-img2.png) no-repeat 0 0;}&lt;/style&gt;');
  }
  if (randomNumber == 3) {
      document.write ('&lt;style&gt;.slider { width: 990px;  height: 378px; position: relative;  background: url(images/slide-img3.png) no-repeat 0 0;}&lt;/style&gt;');
  }
  if (randomNumber == 4) {
      document.write ('&lt;style&gt;.slider { width: 990px;  height: 378px; position: relative;  background: url(images/slide-img4.png) no-repeat 0 0;}&lt;/style&gt;');
  }
  </code></pre>
  
  <p>That produced a blank HTML page. I am trying to do this without creating four separate CSS file using the above method.</p>