[Solved] Animation Java Script Problem|| help

Question

I was made a box which is round the whole body page.
But after 10 second its not working..

And after 10 second it will be take fixed a position.

How to find my problme :
1. Run code
2. Wait 10 to 15 second.

Other problem : i want to hide blue box after click on blue box,, its not working i was set display none;

https://code.sololearn.com/WrhU59OXWebj/?ref=app

Answer 1

Your problem is with where you put the setInterval.

Solution 1:
Move the setInterval so it doesn't get called more than once like this:
window.onload = function start (){
function update() {
var left = Math.floor( Math.random() * 100 );
var top = Math.floor( Math.random() * 100 );

var box = document.getElementById('box');
box.style.cssText = "top:"+ top +"%;" + "left:" + left + "%; display:block";
document.getElementById("pos").innerHTML = left + " " + top;

document.getElementById("btn").style.display = "none ";
}
setInterval(update,2000);
}

Why move it? Your start function is getting called far more frequently than you expect after a few seconds. The number of calls to start is exponentially increasing with each call to it.

You're probably confusing setTimeout with setInterval. setTimeout could be called in each function call with no problem but setInterval will create new repeating intervals.

Solution 2: replace your setInterval with a setTimeout.

Answer 2

Sajid wrote, "Josh Greig thanks for your valuable comment!

&
Can you tell me how can i hide box blue.
When i will be click it!"

Response:
The code link is broken. I get a "Oops, 404 Error!" when clicking your code link now.

Can you share a link to the code again that works?

Answer 3

Josh Greig thanks for your valuable comment!

&
Can you tell me how can i hide box blue.
When i will be click it!

Answer 4

Now, Problme is solved :)