javascript styling two effects at once

Question

Hello I have a bunch of dynamically created div boxes with IDs div1-div999. I then grab random boxes and change the animation name to "grow". I want to also change the playstate to "running" but as I have it now just randomly selects another group to change the play states for.

else if (e.keyCode == '40') {
                 for(var i = 0;i <400; i++){

                     document.getElementById("div"+Math.floor((Math.random()*1000) + 1 )).style.animationName = "Grow";
                     document.getElementById("div"+Math.floor((Math.random()*1000) + 1 )).style.animationPlayState = "running";
                }
            }

I would like to change the animation name and play state of just one group selection. Something like:

document.getElementById("div"+Math.floor((Math.random()*1000) + 1 )).style.animationName = "Grow" / style.animationPlayState = "running";

Is there any way to do this?

Thanks!

is there an issue with storing the random div number into a variable and use it? — Sreekanth, Oct 23 '16 at 21:40
if you want to do the same div 'grow' and 'running' .You should consider stroing Math.floor((Math.random()*1000) + 1 ) in the loop, in a variable and use that to get in document.getelementbyid ,because each time math.random() would generate a different number , you each time in a loop ,you are setting grow to one div and running to another div,is that what you wanted to do — Geeky, Oct 23 '16 at 22:41
Possible duplicate of [How to set multiple css style properties in Javascript](http://stackoverflow.com/questions/3968593/how-to-set-multiple-css-style-properties-in-javascript) — JHoffmann, Oct 23 '16 at 23:13

score 0 · Accepted Answer · answered Oct 23 '16 at 23:00

How about storing that random group of div ID's inside an array? Hope this helps.

else if (e.keyCode == '40') {
                 for(var i = 0;i <400; i++){

var randomSelection=[]; //a new array to store all ID's
randomSelection[i]=Math.floor((Math.random()*1000) + 1))

document.getElementById("div"+randomSelection[i].style.animationName = "Grow";

document.getElementById("div"+randomSelection[i].style.animationPlayState = "running";
                }
            }

javascript styling two effects at once

1 Answers1