title: Random <divs> onclick
body: <p>I'm trying to make a simple game where</p>
  
  <ul>
  <li><p>you start with 9 circles</p></li>
  <li><p>when you click on a circle with a thicker border it's going to increment a score and cause new circles to be drawn randomly.</p></li>
  </ul>
  
  <p>I've already worked on counting stuff but I have a problem, because wherever you click (I mean whatever div) it sums up points. I don't have an idea about how to deactivate div's which do not have a thicker border. </p>
  
  <p>Please tell if this is a good programming approach.</p>
  
  <p><a href="https://i.stack.imgur.com/owRRg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/owRRg.png" alt="photo of game"></a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-2"&gt;
              &lt;h1&gt; Wyniki &lt;/h1&gt; 
              &lt;p&gt; Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. &lt;/p&gt;
            &lt;/div&gt;
  
            &lt;div class="col-md-8"&gt;
              &lt;h1&gt; Gra &lt;/h1&gt;
  
              &lt;div class="wynik"&gt;
                  &lt;h2&gt; Rezultat &lt;/h2&gt;
                  &lt;p id="zliczenie"&gt; &lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="points"&gt; &lt;/div&gt;
  
            &lt;/div&gt;
  
            &lt;div class="col-md-2"&gt;
              &lt;h1&gt; Profil &lt;/h1&gt; 
              &lt;p&gt; Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. &lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
  background-color: #ecf0f1;
  margin          : 2% 2%;
  }
  
  .wynik{
  border          : solid 1px blue;
  }
  
  .point {
  width           : 100px;
  height          : 100px;
  border          : solid 1px #000;
  border-radius   : 100%;
  text-align      : center;
  cursor          : pointer;
  float           : left;
  margin          : 20px;
  }
  .point:hover {
  color           : red;
  border-radius   : 0%;
  }
  
  .points{
  width           : calc(140px * 3);
  margin          : 5px auto;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>window.onload = start;
  function start()
  {
          var div_value = "";
  
          for (i = 0; i &lt; 9; i++) 
              {
                  var element = "div_number" + i;
                  div_value = div_value + '&lt;div class="point" id="'+element+'" onclick="c('+i+')"&gt; Klik &lt;/div&gt;';
  
                  if((i+1)%3 == 0) 
                  {
                      div_value = div_value + '&lt;div style="clear:both;"&gt; &lt;/div&gt;';
                  } 
  
              }
  
          document.getElementsByClassName("points")[0].innerHTML = div_value; 
  
  esthetic();
  random_show();
  }
  // IT SHOWS 1 RANDOM DIV TO START THE GAME
  function random_show() {
      var a = Math.floor((Math.random() * 8));
      var x = document.getElementById("div_number" + a).style.border="10px       dotted";
  }
  
  var liczby = [];
  // IT DROWN LOTS AND COUNT THE SCORE
  function c(i) 
  {
      var a = Math.floor((Math.random() * 8));
      this.i = a;
      var z = document.getElementById("div_number" + i);
      var y = document.getElementById("div_number" + a);
  
  
      if(y.style.border = "10px dotted") {
          z.style.border ="5px dotted";
          liczby.push(i); 
      } else {
          y.style.border="8px solid";
      } 
  
      var x = document.getElementById("zliczenie").innerHTML = liczby.length;
  
  }
  
  
  // IT GIVES EVERY DIV INITIAL style.border 
  function esthetic()
  {
      var x = document.getElementsByClassName("point");
      for (i = 0; i &lt; 9; i++) 
      {
          x[i].style.border = "5px dotted";
  
      }
  }     
  </code></pre>
  
  <p>Thanks a lot for any hints one more time!</p>