+ 3

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

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

17th Oct 2019, 6:48 AM
Ginfio
Ginfio - avatar
18 Answers
+ 4
https://code.sololearn.com/W5z9c2V2smhD/?ref=app
17th Oct 2019, 8:19 AM
Calviղ
Calviղ - avatar
+ 5
Now I am going to set dynamic background color.
17th Oct 2019, 8:10 AM
A͢J
A͢J - avatar
17th Oct 2019, 7:56 AM
A͢J
A͢J - avatar
+ 3
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.
17th Oct 2019, 8:47 AM
Ginfio
Ginfio - avatar
+ 2
AJ || ANANT || AC || ANANY || AY that's what i tried to do in the code, but didn't work.
17th Oct 2019, 7:01 AM
Ginfio
Ginfio - avatar
+ 2
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.
17th Oct 2019, 7:09 AM
A͢J
A͢J - avatar
+ 2
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.
17th Oct 2019, 7:13 AM
Ginfio
Ginfio - avatar
+ 2
id is a unique identifier, cannot be assigned more than once, use class instead.
17th Oct 2019, 7:43 AM
Calviղ
Calviղ - avatar
+ 2
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
17th Oct 2019, 8:31 AM
Calviղ
Calviղ - avatar
17th Oct 2019, 8:34 AM
A͢J
A͢J - avatar
+ 2
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.
17th Oct 2019, 8:37 AM
Calviղ
Calviղ - avatar
+ 2
Ginfio Check again. We can also call function inside $(document).ready()
17th Oct 2019, 8:43 AM
A͢J
A͢J - avatar
+ 1
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
17th Oct 2019, 7:20 AM
Ginfio
Ginfio - avatar
+ 1
AJ || ANANT || AC || ANANY || AY that works. I was about to say only 3/10 elements work, but then I saw the CSS. COOL.
17th Oct 2019, 8:03 AM
Ginfio
Ginfio - avatar
+ 1
Calviղ that works too. What does the "n" mean by the way?
17th Oct 2019, 8:34 AM
Ginfio
Ginfio - avatar
+ 1
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.
17th Oct 2019, 8:38 AM
Ginfio
Ginfio - avatar
0
You can use setInterval method.
17th Oct 2019, 6:59 AM
A͢J
A͢J - avatar
0
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.
17th Oct 2019, 7:17 AM
A͢J
A͢J - avatar