Give created elements random margin every 5 seconds. [JS]

Question

In this code I created 10 elements via JS for experiment. I gave them random margin.
newElm.style.marginTop = Math.floor(....) + "%";

Now I want the margin to change randomly every 2 seconds (or any other number).
How do we do that?
Experimental code:
https://code.sololearn.com/WKNzf7JN6K7m/?ref=app

Answer 1

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

Answer 2

Now I am going to set dynamic background color.

Answer 3

Ginfio Check this. Edited by me

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

Answer 4

AJ || ANANT || AC || ANANY || AY Now it works.
Really cool.
I played with it for a while: changing the set interval num.
I liked 100 best.
1000 is like a video playing, but lagging.

It doesn't matter thogh.
It looks really cool.

Answer 5

AJ || ANANT || AC || ANANY || AY that's what i tried to do in the code, but didn't work.

Answer 6

It's working. You have only 1 second. Change it with 2 or 3 second and check.

Height and Width also changing of each blocks.

And why you used for loop. Remove that and check.

Ok. It's for 10 elements.

Answer 7

AJ ||
I want it to change margin on the 10 elments only. I dont want to keep creating elements like it's doing right now.

Answer 8

id is a unique identifier, cannot be assigned more than once, use class instead.

Answer 9

Ginfio this is a better way, no need to assign multiple class, and both can set to more elements by increase the iteration.

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

Answer 10

Ginfio Check with Random Color.

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

Answer 11

Ginfio for timer callback which is running asynchronously, you cannot assign the nElem directly to asynchronous function. (i think this is the actual cause of your code animate one element only)

So the asynchronous function is binded with current i or nElem and using function argument, n to pass it into the function.

Answer 12

Ginfio Check again. We can also call function inside $(document).ready()

Answer 13

AJ || ANANT || AC || ANANY || AY I moved the set interval where the margin is, now it's a different problem.
it only works for 1/10 elements.
https://code.sololearn.com/WKNzf7JN6K7m/?ref=app

Answer 14

AJ || ANANT || AC || ANANY || AY that works.
I was about to say only 3/10 elements work, but then I saw the CSS.
COOL.

Answer 15

Calviղ that works too.
What does the "n" mean by the way?

Answer 16

AJ || ANANT || AC || ANANY || AY I think there might be some error when calling the function: I don't think the function is called correctly.
Because when i oress run, it's not doing anything.

Answer 17

You can use setInterval method.

Answer 18

Ginfio It's happening because you are creating div inside the loop and in setInterval method also. That's why it's creating multiple blocks.

You have to create 10 blocks first with unique id. Then apply height and width on the particular blocks using id in Random order.