How to make a div box move left/right/top/bottom using onclick event?

Question

I tried to use document.getElementById("something").style.left=some number but it doesn't work.

Answer 1

Hey Alex.You are going the right way .The reason it doesnt work is propably because you didnt add 'position :relative' in the CSS of your div .
The div tag wont move without position attribute.

Answer 2

Hey Alex.
It is really simple.
What you have to do is create a div in html and give it some unique id.
Now give it some styling and also create animation for it by using @keyframes.
Now create a button with onclick event.
And create a function in js part in which you can actually apply that animations to your div.

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

Answer 3

Raj Chhatrala☑️ I appreciate your way. But it makes the button work only once. Once the animation is performed the button becomes useless. You cannot perform the animation again.

Answer 4

Oh, I forgot about position:relative; maybe that is why it was not working. 😅
Thank you!

Answer 5

Mitali I noticed it now.
That's a big bug, I will find a way to perform it again and again.

Answer 6

https://code.sololearn.com/WRu3347N21vD/?ref=app
I am not sure why it is not working.

Answer 7

💧Alex Tusinean🔥 It dont works because you have to set the left value more the units (like px) in string. Try to set the value like '100px'

Answer 8

I made few changes here, take a look

var n=0;
function k(){
if(n%2==0) {document.getElementById("diverta").style.left="100px" ;
n++;}
else{
document.getElementById("diverta").style.left="0" ;
n--; }
}

function right(){

setInterval(k(),10);

}

Answer 9

What if I want it to be working each time I click on it