Tough random colors with restriction

JavaScript
1

I am trying my luck here to learn from each other how to solve this.

  1. I need intake only td with no class and ignore all td with class, to get total number of boxes something like this to replace below - var spans = $(“#tlb tr:not(.twentyNine .thirty .thirtyOne) td”), instead of var spans = document.getElementById(‘tbl’).getElementsByTagName(‘td’); but it not working, and :not does not work in ie

Reason for this, i group 9 box as 1 , for example if user type 30, box 31(9 boxes) will activate a class which display none, so I only intake all td with no class to exclude box 31(9 boxes), in this case spans.length will return 270 (30x9)

  1. black = 12, red = 53, lightblue = 19, lime = 34, yellow = 17, pink = 42, green = 102;

I would like to first have 12 black fixed on “b” spot Followed by 53 red to be random place within only the ‘r’ spots (‘r’ spot is every 3 row, first 15 box) and unfilled ‘r’ spots + rest of unfilled box random (19,34,17,42,102 each different color)

There should be no unfilled color.

Thank you

<table id="tbl" border='1'>  
<tbody>
<tr>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>b</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>

</tr>
<tr>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>b</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>

</tr>
<tr>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>x</td>
    <td>x</td>
    <td>b</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
</tr>

<tr>

<td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>b</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
</tr>
<tr>
<td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>b</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>

</tr>
<tr>

<td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>x</td>
    <td>x</td>
    <td>b</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
</tr>
<tr>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>b</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
</tr>
<tr>
<td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>b</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>

</tr>
<tr>

<td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>x</td>
    <td>x</td>
    <td>b</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>

</tr>
<tr>

<td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>b</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
</tr>
<tr>

<td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>b</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
</tr>
<tr>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>r</td>
    <td>x</td>
    <td>x</td>
    <td>b</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
</tr>
<tr>
    <td class="twentyNine">x</td>
        <td class="twentyNine">x</td>
    <td class="twentyNine">x</td>
    <td class="thirty">x</td>
        <td class="thirty">x</td>
    <td class="thirty">x</td>
    <td class="thirty-one">x</td>
        <td class="thirty-one">x</td>
    <td class="thirty-one">x</td>

</tr>
<tr>
    <td class="twentyNine">x</td>
        <td class="twentyNine" >x</td>
    <td class="twentyNine" >x</td>
    <td class="thirty">x</td>
        <td class="thirty">x</td>
    <td class="thirty">x</td>
    <td class="thirty-one">x</td>
        <td class="thirty-one">x</td>
    <td class="thirty-one">x</td>


</tr>
<tr>

    <td class="twentyNine" >r</td>
        <td class="twentyNine" >r</td>
    <td class="twentyNine" >r</td>
    <td class="thirty">r</td>
        <td class="thirty">r</td>
    <td class="thirty">r</td>
    <td class="thirty-one">r</td>
        <td class="thirty-one">r</td>
    <td class="thirty-one">r</td>


</tr>
</tbody></table>
<button onclick=initTblColors()>Random Test</button>

<script type="text/javascript">

var tblColors = [];
Number.prototype.random = function() { return Math.floor(Math.random() * this); }

  var sat = [17,34,51,68,85,103,120,137,154,171,188,205];  // fixed spot - 12 black block out

  // as the number of boxes increase, I treat 9 boxes as 1, so in this case there are 31 boxes, total 31 x 9 = 279 boxes
  var noOfBox = 29; // user can change 29 ,30, 31 

function initTblColors() {

if (noOfBox == 29)
{
   // $(".twentyNine").removeClass("twentyNine");

}else if (noOfBox == 30)
{
    $(".twentyNine").removeClass("twentyNine");
    $(".thirty").removeClass("thirty");

}else if (noOfBox == 31)
{
    $(".twentyNine").removeClass("twentyNine");
    $(".thirty").removeClass("thirty");
        $(".thirty-one").removeClass("thirty-one");

}

 var spans =  document.getElementById('tbl').getElementsByTagName('td');  // Unsure what to type here , I  want it to target all td with no class name of tbl label

var ColorRemainWithoutBlack = parseInt(spans.length) - 12;

for (var i = 0; i < spans.length; i++) {
    spans[i].style.backgroundColor = tblColors[i]; }
 var rc, tc1, tc2;
  for (var j=0; j<ColorRemainWithoutBlack; j++) {
      rc = (ColorRemainWithoutBlack).random();
    tc1 = spans[j].style.backgroundColor;
    tc2 = spans[rc].style.backgroundColor;
    spans[rc].style.backgroundColor = tc1;
    spans[j].style.backgroundColor = tc2;
  }
  for (var k=0; k<sat.length; k++) {
    rc = sat[k];
    tc1 = spans[rc].style.backgroundColor;
    tc2 = spans[ColorRemainWithoutBlack+1+k].style.backgroundColor;
    spans[ColorRemainWithoutBlack+1+ k].style.backgroundColor = tc1;
    spans[rc].style.backgroundColor = tc2;

  }


      }summate();  // initTblColors();

function summate() {
 var colorPicks = ['red','lightblue','lime','yellow','pink'];  // or ['red','blue','green','yellow','pink']
  tblColors.length = 0;
    var cnt;
    var cnt2;
    var cnt3;
    var cnt4;
    var cnt5;


  var cnt = 19; // value is generated, not fixed
    var cnt2 = 34;// value is generated, not fixed
  var cnt3 = 17;// value is generated, not fixed
  var cnt4 = 42;// value is generated, not fixed
  var cnt5 = 102;// value is generated, not fixed
     for (var j=0; j<cnt; j++) {
      tblColors.push(colorPicks[0]);
    }

    for (var k=0; k<cnt2; k++) {
      tblColors.push(colorPicks[1]);
    }
    for (var j=0; j<cnt3; j++) {
      tblColors.push(colorPicks[2]);
    }
    for (var j=0; j<cnt4; j++) {
      tblColors.push(colorPicks[3]);
    }
    for (var j=0; j<cnt5; j++) {
      tblColors.push(colorPicks[4]);
    }

  for (var i=0; i<sat.length; i++) { tblColors.push('black');} // 12 black


  // remaining 53 red, to be generated within only the 'r' spots

  initTblColors();
} 
</script>
2

querySelectorAll does have pretty solid support these days http://caniuse.com/#feat=queryselector, but if you need more support than that you will need to use a library like jQuery or Sizzle which is what jQuery itself uses for finding nodes by css selectors.

document.querySelectorAll('td:not([class])')

I’m sorry, I can’t understand the rest of your question.

3

Hi

Thank you for your reply

The color are appearing but not what i wanted and some box are not filled.

For testing purpose, I hardcoded the value to each variable.
Originally, there are input box where user key in the values and
document.getElementById(‘textbox_id’).value get the value for each noOfBox,cnt,cnt2,cnt3,cnt4,cnt5

var noOfBox = 31; // can be 29,30,31 , if 31 total number of cell is 31x9 = 279

var cnt = 19;
var cnt2 = 34;
var cnt3 = 17;
var cnt4 = 42;
var cnt5 = 102;

I stuck on random color generation with restriction

I need intake only td with no class and ignore all td with class, to get total number of boxes.
(noOfBox == 29) This part of code will toggle the class.
Reason for this, i group 9 box as 1 , for example if user type 30, box 31(9 boxes) will activate a class which display none, so I only intake all td with no class to exclude box 31(9 boxes), in this case spans.length will return 270 (30x9)

  1. black = 12, red = 53, lightblue = 19, lime = 34, yellow = 17, pink = 42, green = 102;

I would like to first have 12 black fixed on “b” spot
Followed by 53 red to be random place within only the ‘r’ spots (‘r’ spot is every 3 row, first 15 box)
and unfilled ‘r’ spots + rest of unfilled box random fill with 19 lightblue,34 lime,17yellow,42pink,102green(they will be randomly place when refresh browser or click generate button)

4

I notice that not every row has the same number of cells.

It may not have any effect on your JavaScript. but then again it just might.
IMHO JavaScript works best when the HTML is valid.

5

Hi,
Thank you for your reply.

I group 9 small box as 1 big box, thus there are 7 big box in a row
7
14
21
28
last row is either 1 big box if noOfBox is 29, or 2 big box if noOfBox is 30 or 3 big box if noOfBox is 31.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.