title: Generating random groups of colored blocks using Javascript
body: <p>I'm new to both html and Javascript coding, and only recently learning to work with them through w3schools.com tutorials. </p>
  
  <p>Right now, I'm trying produce the following effect on a webpage:</p>
  
  <p>There're 9 square blocks on the page (set using  tags). I'm looking to use Javascript or jquery coding to make it so that each block randomly turns to one of seven different colors every time the page is (re)loaded. </p>
  
  <p>I can figure how to generate random colors for individual blocks, but now I need to make it so that there are only 3 colors generated each time, with 4 blocks in Color A, 3 blocks in Color B, and 2 in Color C (Colors A, B &amp; C can be any of the 7 colors, and the group of blocks generating the same color should be random/different every time the page (re)loads, I just need them to be grouped in the 4/3/2 format above each time).</p>
  
  <p>Hope I'm not too confusing at expressing what I'm trying to do. Any help/advise would be greatly appreciated.</p>
  
  <p>Thanks!
  Gabe</p>
  
  <p>EDIT: (Sorry for the late response, network was unstable me for the past 2 days)</p>
  
  <p>Here's what I originally have</p>
  
  <p>My code for the blocks in the  the html file:</p>
  
  <pre><code>&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;
  </code></pre>
  
  <p>This was my attempt at random color generation in my .js file:</p>
  
  <pre><code>var colorArray = ["#800000", "#A7BEFF",....];
  
  var randomColor = Math.floor((Math.random() * colorArray.length));
  
  for (i = 0; i &lt; 9; i++) {
      $(".squareDivs").eq(i).css("background-color", colorArray[randomColor]);
  
      }
  </code></pre>
  
  <p>CSS style:</p>
  
  <pre><code>&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;
  }
  
  
  .spanrows2 {
  text-align: center;    
  width: 600px;
  }
  
  .squareDivs {
  width:100px;
  height:100px;
  background-color:#000000;
  margin: 10px;
  border-radius: 10px;
  display: inline-block;
  }
  
  .squareTxt {
  line-height: 100px;
  vertical-align: middle;    
  }
  
  
  &lt;/style&gt;
  </code></pre>
  
  <p>This way, every time I re-loaded, all 9 blocks generate the exact same color. I'm trying to group them into the 4/3/2 format I described above.</p>
  
  <p>UPDATE:</p>
  
  <p>I've updated my script code, and now I've found a way to limit the random colors to just 3 each time (probably not the smoothest way, but it worked and that's all I ask for), but I still can't figure out how to put them in 4/3/2 groups....</p>
  
  <p>UPDATE 2:</p>
  
  <p>I tried implementing a counter for each color in the tempArray so that they won't be used more than the given number of times, but it seems to have made the whole thing worse! Now all 9 blocks are the same color again every time I re-load. Can someone please point out what I'm doing wrong (latest changes made to below code)?</p>
  
  <pre><code>    var colorArray = ["#800000", "#A36386", "#FFD4D8", "#223CFF", "#F5FF5A", "#FF5555", "#A7BEFF"];
  
      function Shuffle(o) {
          for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
          return o;
      };
  
      Shuffle(colorArray);
  
      var color1 = Math.floor((Math.random() * colorArray.length));
  
      var color2 = "#000000";
      do {
          color2 = Math.floor((Math.random() * colorArray.length));;
      }
      while (color2 != color1);
  
      var color3 = "#000000";
      do {
          color3 = Math.floor((Math.random() * colorArray.length));;
      }
      while (color3 != color1 &amp;&amp; color3 != color2);
  
      var tempArray = [color1, color2, color3];
  
      for (i = 0; i &lt; 9; i++) {
          var count1 = 0, count2 = 0, count3 = 0;
          var selectedColor;
          var randomColor = Math.floor((Math.random() * tempArray.length));
          if (colorArray[randomColor] == tempArray[0] &amp;&amp; count1 &lt;= 4) {
                  selectedColor = tempArray[0];
                  count1++;
          }
          else if (colorArray[randomColor] == tempArray[1] &amp;&amp; count2 &lt;= 3) {
  
              selectedColor = tempArray[1];
                  count2++;
          }
          else if (count3 &lt;= 2) {
              selectedColor = tempArray[2];
                  count3++;
          }
          $(".squareDivs").eq(i).css("background-color", colorArray[selectedColor]);
  }
  </code></pre>