javascript for loop to use a function for several objects

Question

I am working on a game that has three dice cubes that show random faces upon clicking a button. Images are by css image sprite. If the random number gets 1 the dice cube is assigned to a css class that has its image sprite.

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;
    }
}

I have a separate button, when clicked it should run the above diceroll function to the three divs with ids dice1, dice2 and dice3.

I want to use

function gotoloop (){

    for (i = 0; i < 2; i++) {
        // the code that affects dice(n) and n=1 and then diceroll function
        // affects dice1 n+1
    }

}

I researched and could not find a way to implement the code for the last commented two lines. Please let me know if my approach is correct and help me with the code.

People, please explain your down votes. The question might not be the best as the problem is easy, but it is written clearly and shows some work. — jfrej
– jfrej, Commented Sep 14, 2014 at 8:07

jfrej · Accepted Answer · 2014-09-14 08:16:32Z

1

If I understood your question correcly, you want something like this:

function diceroll (diceId){

    var randomnumber = Math.floor(Math.random() * 6) + 1;

    switch (randomnumber) {

        case 1:        document.getElementById(diceId).setAttribute("class", "face1");        break;
        case 2:        document.getElementById(diceId).setAttribute("class", "face2");        break;
        case 3:        document.getElementById(diceId).setAttribute("class", "face3");        break;
        case 4:        document.getElementById(diceId).setAttribute("class", "face4");        break;
        case 5:        document.getElementById(diceId).setAttribute("class", "face5");        break;
        case 6:        document.getElementById(diceId).setAttribute("class", "face6");        break;
    }
}

function gotoloop (){
    // Start loop at i=1 because the first ID is dice1
    for (var i = 1; i <= 3; i++) {
        // the code that affects dice(n) and n=1 and then diceroll function affects dice1
        // n+1
        diceroll("dice" + i);
    }
}

Or as per Marc Baumbach's comment, you could write:

function diceroll (diceId){

    var randomnumber = Math.floor(Math.random() * 6) + 1;

    document.getElementById(diceId).setAttribute("class", "face" + randomnumber);
}

edited Sep 14, 2014 at 8:16

answered Sep 14, 2014 at 8:04

jfrej

4,65833 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marc Baumbach Over a year ago

+1, I think this is what they meant. The switch could also be removed and simply append the random number to the "face" string. The code here (6 - 1 + 1) should probably just be 6 too. :)

Collectives™ on Stack Overflow

javascript for loop to use a function for several objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related