Tengo una página donde se crean círculos y aparecen en lugares aleatorios.
Cuando haces clic en el círculo, se oculta.
Quiero hacer que cuando haya más de 3 círculos en la página al mismo tiempo, aparezcan alertas, y cuando haga clic en Aceptar, la página se vuelva a cargar.
Intenté agregar esta pieza al final del código, pero nada funciona:
if(i > 3) { alert('Alert For your User!'); window.location.reload(); } //create circle var widthHeight = 35; var margin = 25; var delta = widthHeight + margin; let clicks = 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 < nodes.length; i++) { nodes[i].addEventListener('click', (event) => { event.target.style.animation = 'Animation 200ms linear'; setTimeout(() => { event.target.style.animation = ''; }, 220); }); } $(div).click(function() { $('#clicks').text(++clicks); $(this).fadeOut(); }); document.body.appendChild(div); } let i = 0; const oneSecond = 600; setInterval(() => { i += 1; createDiv(`circle${i}`); }, oneSecond); .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); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Crea una nueva variable circleCnt. Al crear un nuevo círculo, asigne +1, al hacer clic en -1.
Luego puede hacer su propia validación con esta variable.
//create circle var widthHeight = 35; var margin = 25; var delta = widthHeight + margin; let clicks = 0; let circleCnt = 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 < nodes.length; i++) { nodes[i].addEventListener('click', (event) => { event.target.style.animation = 'Animation 200ms linear'; setTimeout(() => { event.target.style.animation = ''; }, 220); }); } $(div).click(function() { --circleCnt; $('#clicks').text(++clicks); $(this).fadeOut(); }); if(circleCnt > 3) { alert('Alert For your User!'); window.location.reload(); } document.body.appendChild(div); } let i = 0; const oneSecond = 600; setInterval(() => { i += 1; ++circleCnt; createDiv(`circle${i}`); }, oneSecond); .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); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>