In the game I'm developing, there are three dice cubes that display random faces when a button is clicked. The images are obtained from a CSS image sprite. Each dice cube is assigned a CSS class based on the random number generated.
function diceroll (){
var randomnumber = Math.floor(Math.random() * (6 - 1 + 1)) + 1;
switch (randomnumber) {
case 1:
document.getElementById("dice1").setAttribute("class", "face1");
break;
case 2:
document.getElementById("dice1").setAttribute("class", "face2");
break;
case 3:
document.getElementById("dice1").setAttribute("class", "face3");
break;
case 4:
document.getElementById("dice1").setAttribute("class", "face4");
break;
case 5:
document.getElementById("dice1").setAttribute("class", "face5");
break;
case 6:
document.getElementById("dice1").setAttribute("class", "face6");
break;
}
}
There is a separate button that, when clicked, should execute the 'diceroll' function for three divs with ids dice1, dice2, and dice3.
I would like to implement
function gotoloop (){
for (i = 0; i < 2; i++) {
// code that modifies dice(n) where n=1 initially and then calls diceroll function
// modifying dice1 to dice2 in the next iteration
}
}
After searching, I couldn't find a way to write the code for the last two commented lines. Please review my approach and provide guidance on how to proceed with the code implementation.