title: Reload page, If there are more than three div
body: <p>I have a page where circles are created and appear in random places.</p>
  <p>When you click on the circle, it hides.</p>
  <p>I want to make it so that when there are more than 3 circles on the page at the same time, then alerts appear, and when you click on ok, the page reloads.</p>
  <p>I added a new variable, when creating a circle we get +1, when we click on the circle -1. Then I added a condition</p>
  <pre><code>let circleCount = 0;
  
  ++circleCount;
  --circleCount;
  
  if(circleCount &gt; 3) {
        alert('Alert For your User!');
        window.location.reload(); 
      }
  </code></pre>
  <p>Everything works as it should, only when we click OK in the alert, reloading the page does not work correctly, sometimes you need to click several times to reload. What could be the problem?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//create circle
  
  var widthHeight = 35;
  var margin = 25;
  var delta = widthHeight + margin;
  
  let clicks = 0;
  let circleCount = 0;
  
  function createDiv(id, color) {
    let div = document.createElement('div');
    var currentTop = 0;
    var documentHeight = document.documentElement.clientHeight;
    var documentWidth = document.documentElement.clientWidth;
    div.setAttribute('class', id);
    if (color === undefined) {
      let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
      div.style.borderColor = colors[Math.floor(Math.random() * colors.length)];
    }
    else {
     div.style.borderColor = color; 
    }
    div.classList.add("circle");
    div.classList.add("animation");
    
    currentTop = Math.floor(Math.random() * documentHeight) - delta;
    currentLeft = Math.floor(Math.random() * documentWidth) - delta;
    
    var limitedTop = Math.max(margin * -1, currentTop);
    var limitedLeft = Math.max(margin * -1, currentLeft);
  
    div.style.top = limitedTop + "px";
    div.style.left = limitedLeft + "px";
    
    const nodes = document.querySelectorAll('.animation');
    for(let i = 0; i &lt; nodes.length; i++) {
    nodes[i].addEventListener('click', (event) =&gt; {
      event.target.style.animation = 'Animation 200ms linear';
      setTimeout(() =&gt; {
        event.target.style.animation = '';
      }, 220);  });
    }
    
    $(div).click(function() {
      $('#clicks').text(++clicks);
      --circleCount;
      $(this).fadeOut();
    });
    
    if (circleCount &gt; 3) {
        alert('Alert For your User!');
        window.location.reload(); 
      }
    
    document.body.appendChild(div);
  }
      
  let i = 0;
  
  const oneSecond = 600;
  
  setInterval(() =&gt; {
    i += 1;
    ++circleCount;
    createDiv(`circle${i}`);
  }, oneSecond);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.circle {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: #ffffff;
    border: 3px solid #000;
    margin: 20px;
    position: absolute;
  }
  
  @keyframes Animation {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(.8);
    }
    100% {
      transform: scale(1);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>