I have a page where circles are created and appear in random places.
When you click on the circle, it hides.
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.
I added a new variable, when creating a circle we get +1, when we click on the circle -1. Then I added a condition
let circleCount = 0;
++circleCount;
--circleCount;
if(circleCount > 3) {
alert('Alert For your User!');
window.location.reload();
}
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?
//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 < 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);
--circleCount;
$(this).fadeOut();
});
if (circleCount > 3) {
alert('Alert For your User!');
window.location.reload();
}
document.body.appendChild(div);
}
let i = 0;
const oneSecond = 600;
setInterval(() => {
i += 1;
++circleCount;
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>>Solution :
I think only you need to else part at the end of reloading, just see
if (circleCount > 3) {
alert('Alert For your User!');
window.location.reload();
}
else
document.body.appendChild(div);
So run below code and check is it fixed or not
let circleCount = 0;
++circleCount;
--circleCount;
if(circleCount > 3) {
alert('Alert For your User!');
window.location.reload();
}
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?
//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 < 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);
--circleCount;
$(this).fadeOut();
});
if (circleCount > 3) {
console.log(circleCount);//alert('Alert For your User!');
window.location.reload();
}
else
document.body.appendChild(div);
}
let i = 0;
const oneSecond = 600;
setInterval(() => {
i += 1;
++circleCount;
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>