How do i move the button please 😅

Question

hey,

So this is my first attempt at learning web and i come across 2 problems.

my first problem is trying to position the function button central underneath the animation and my second problem is allowing the animation to finish before the function can be called.

Thanks

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

Answer 1

Hey D_Stark I can help with the button position try this
button{
position:absolute ;
top:340px;
left:150px;
}
Running out to bike so if the other isn't solved when I get back happy to look at it for you. Best of Luck🙂

Answer 2

Thanks glad that part worked for you I'm researching the second part still not certain but you might can try to add an event listener.

Answer 3

Nice solution FreshScallops !!!🙂

Answer 4

ODLNT , FreshScallops & bobbie thanks guys ill give this a try when i get back thanks 👍

Answer 5

bobbie works perfect thanks 😉👍

Answer 6

FreshScallops thanks i will remember that next time 😉,i have updated the code and credited my helpers 😀👍

Answer 7

FreshScallops that worked perfect thanks 😉👌

ODLNT your method worked with allowing the function to complete but when the function was called again the animation speed increased slightly each run 🤔

Answer 8

Why not use the disabled attribute to disable and enable the button

function animation(){

var image = document.getElementById("ball");
document.getElementById("btn").disabled = true;
move = 0,sw = 0,timer = setInterval(sprite,21);

function sprite(){

if(move < 110 && sw ==0){

++move;

}

else{
++sw;
--move;
if(move===0){
document.getElementById("btn").disabled = false;
}

}//else
image.style.borderRadius = move+"px";
}//size
}//animation

make sure you add id="btn" to the button tag