Limit number of clicks

[KeredDrahcir]

I have a loop which draws a 12 x 8 grid of 96 squares. I'm using a JavaScript function so that if a user clicks on a square it changes to red and if they click on it again, it will change back to black.
What I want to do it prevent them from having more than 50 red squares at any one time.

I have a function that does this kind of think with checkboxes but I'm not sure how to do it with the grid I'm using. Can anyone help please?

JavaScript

<script type="text/javascript">
  <!--
    function plan(id){
      var obj = document.getElementById(id);
      obj.style.backgroundColor = (obj.style.backgroundColor == "rgb(0, 0, 0)") ? "#ff0000" : "#000000";
     }
  //-->
</script>

Box (within loop)

<div style="width: 30px; height: 30px; border-style: solid; border-color: #ffffff; border-width: <?=$border;?>; float: left; background-color: #000000;" id="<?=$row, $column;?>" onclick="plan('<?=$row, $column;?>');">&nbsp;</div>

[Rabbit]

A couple of ways to do this. Either loop through your divs and keep a count of how many of them are red or keep a running count whenever the function is called and decrement or increment appropriately.

[Exequiel]

Try this one. .

<script type="text/javascript">
      <!--
      var count=1;
        function plan(id){
 
          var obj = document.getElementById(id);
          if(count <= 5){
              obj.style.backgroundColor = (obj.style.backgroundColor == "rgb(0, 0, 0)") ? "#ff0000" : "#000000";
          }else{
               alert('You reach the maximum click.  Total click: '+count);
        }
 
          count++;//counter
 
         }
      //-->
    </script>

[Rabbit]

@exequiel, you need to start the count at 0. And you have no decrement. You need to decrement/increment appropriately otherwise the code stops working after any 5 clicks rather than after 5 red divs.

[Exequiel]

@Rabbit . okey, thank you for that comment. . really appreciated. . :)