Javascript random function changing the picture in the html file -

Javascript random function changing the picture in the html file -

i inquire help completing homework. now, before turn away , not asking write me. need point me in right direction.

so, need create dice game. problem having problems finding way connect javascript code dices in html file.

for example:

if code :

var dice1 = math.round(math.random() * 6);

gives me 4, show dice_4.png picture.

this code cube/dice on html file.

<div class="wrap"> <div class="cube"> <div class="front"></div> <div class="back"></div> <div class="top"></div> <div class="bottom"></div> <div class="left"></div> <div class="right"> </div> </div> </div>

and on css file.

.front { background-image: url('pildid/dice_1.png'); background-size:100%; } .back { background-image: url('pildid/dice_6.png'); background-size:100%; } .right { background-image: url('pildid/dice_4.png'); background-size:100%; } .left { background-image: url('pildid/dice_3.png'); background-size:100%; } .top { background-image: url('pildid/dice_2.png'); background-size:100%; } .bottom { background-image: url('pildid/dice_5.png'); background-size:100%; }

i used 3d cube without rotation.

to recap, when random gives me 4 first cube, want html show me .right part of css file.

not sure how much sense making here, seek explain improve if confusing.

does have ideas should look?

(sorry, format little messed first time , whatnot).

thank you.

if have maintain same html arrangement have:

<div class="wrap"> <div class="cube"> <div class="front"></div> <div class="back"></div> <div class="top"></div> <div class="bottom"></div> <div class="left"></div> <div class="right"> </div> </div> </div>

then need way associate dice numbers cube side div's. suggest array of class names.

var dice1 = math.round(math.random() * 5); var sides = ['front', 'top', 'left', 'right', 'bottom', 'back']; var cubesides = document.getelementsbyclassname('cube')[0].children; (var = 0; < cubesides.length; i++) { // if have class associated cube side div's. cubesides[i].style.display = cubesides[i].classname === sides[dice1] ? 'block' : 'none'; // if can have more 1 class in side div's, utilize statement instead of previous one. // cubesides[i].style.display = cubesides[i].classname.split(' ').indexof(sides[dice1]) > -1 ? 'block' : 'none'; }

see demo.

but, if allowed alter html construction arrange div's in ascending order:

<div class="wrap"> <div class="cube"> <div class="front"></div> <div class="top"></div> <div class="left"></div> <div class="right"></div> <div class="bottom"></div> <div class="back"></div> </div> </div>

then code becomes easier:

var dice1 = math.round(math.random() * 5); var cubesides = document.getelementsbyclassname('cube')[0].children; (var = 0; < cubesides.length; i++) { cubesides[i].style.display = === dice1 ? 'block' : 'none'; }

see demo.

javascript html css