title: How do I add random colours from my predetermined set of colours through my JS file?
body: <p>I could only come up with this  </p>
  
  <pre><code>var colorsValues = {'#800000', '#A36386', '#FFD4D8, '#223CFF', '#F5FF5A', '#FF5555', '#A7EBFF'};
      var colors = varcolorsValues{Math.floor(Math.random() * colorsValues.length)}; 
  </code></pre>
  
  <p>but it doesn't do anything. Am I on the right method?</p>
  
  <p>I tried this as well. </p>
  
  <pre><code> $(document).ready(function () {
    var back = ['#800000', '#A36386', '#FFD4D8, '#223cff', '#F5FF5A', '#FF5555', '#A7EBFF',];
    var rand = back[Math.floor(Math.random() * back.length)];
    $('div class='squareDivs'').css('background',rand);
  })
  </code></pre>
  
  <p>Both don't work for my <code>&lt;div class='squareDivs'&gt;</code>either. Much help appreci</p>
  
  <p>..............................................................</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
          &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
          &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  
          &lt;script src="jquery.js"&gt;&lt;/script&gt;
          &lt;script src="myScript.js"&gt;&lt;/script&gt;
  
          &lt;style&gt;
          body{font-size:30px;
          font-family: "Arial", "sans-serif";}
  
          table {
              margin-top:50px;
              background-color:white;
              border: 1px solid black;
              margin-left:auto; 
              margin-right:auto;
              width:50%
          }
  
          td {
              width: 700px;
              padding: 5px;
              border: 1px solid black;
          }
  
          .spanrows1,
          .spanrows2 {
               text-align: center;
          }  
  
          .spanrows1 {
              width: 400px;
          }
  
          .spanrows2 {
              width: 600px;
          }
  
          .span2rows {
              text-align: left;
          }
  
          .squareDivs {
              width:100px;
              height:100px;
              background-color:#000000;
              margin: 10px;
              border-radius: 10px;
              display: inline-block;
          }
  
          .squareTxt {
              line-height: 100px;
              vertical-align: middle;    
          }
  
          .alignTxt{text-align: center;}
  
          &lt;/style&gt;
          &lt;/head&gt;
  
          &lt;body&gt; 
  
              &lt;div class="alignTxt"&gt;&lt;span id="titleTxt"&gt;&lt;/span&gt;&lt;/div&gt;
  
          &lt;table&gt;
          &lt;tr&gt;
               &lt;td class='spanrows2'&gt;
                  &lt;div class='squareDivs'&gt;&lt;span class='squareTxt'&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class='squareDivs'&gt;&lt;span class='squareTxt'&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class='squareDivs'&gt;&lt;span class='squareTxt'&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class='squareDivs'&gt;&lt;span class='squareTxt'&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class='squareDivs'&gt;&lt;span class='squareTxt'&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class='squareDivs'&gt;&lt;span class='squareTxt'&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class='squareDivs'&gt;&lt;span class='squareTxt'&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class='squareDivs'&gt;&lt;span class='squareTxt'&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class='squareDivs'&gt;&lt;span class='squareTxt'&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;/table&gt;
  
          &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>
  
  <p>......</p>