Javascript loop to update image is returning broken image

Question

I am new to javascript and am trying to create this loop to simulate some dice rolls. When I click roll none of the images are refreshed and it ends with the broken image shown. Can anyone see where my error is?

    function roll(){
        for(x=0;x<10;x++){ 
            var die_num1 = Math.ceil(Math.random()*6);
            for(y=0;y<20;y++){
                var picturetype1 = Math.ceil(Math.random()*3);
                if (picturetype1 == 1){prefix1 = "die-";}
                if (picturetype1 == 2){prefix1 = "dicet-";}
                if (picturetype1 == 3){prefix1 = "dices-";}
                document.getElementById("dice").src='http://localhost/CodeIgniter_2.1.2/dice/' + prefix1 + die_num1 + '.gif';
            }
        } 
    }

body:

    <input type ="button" value = "Roll" onclick="roll()" >
    <img name="dice" id="dice" src="http://localhost/CodeIgniter_2.1.2/dice/die-1.gif" > 

I used a document.write to make sure that at least the final image existed in my folder and it does. I would expect to see the images cycling through as the loop progresses though. Again, I have no experience with javascript and have put this together based on how I thought it should look. Any help will be appreciated.enter code here

Answer 1

I wouldn't expect browser as an event-driven environment even to consider updating the screen before you return from you roll() . You need to get acquainted with setTimeout and handle it as a sequence of timer events.

Answer 2

Thanks for setting me in the right direction. I have reworked this to use setTimeout as Michael suggested and it is working great. Only needed 1/10 of a second per iteration, not much but made all the difference.

function roll2(){
    var timer = setTimeout ("roll2();", 100);
    i++;
    if(i >= 15) clearTimeout(timer);
    var die_num1 = Math.ceil(Math.random()*6);
    var picturetype1 = Math.ceil(Math.random()*3);
    if (picturetype1 == 1){prefix1 = "die-";}
    if (picturetype1 == 2){prefix1 = "dicet-";}
    if (picturetype1 == 3){prefix1 = "dices-";}
    if (i <=15) {
        document.getElementById("dice").src='http://localhost/CodeIgniter_2.1.2/dice/' + prefix1 + die_num1 + '.gif';
    }
    if (i >=15) {
        document.getElementById("dice").src='http://localhost/CodeIgniter_2.1.2/dice/die-' + die_num1 + '.gif';
        i=0;
    }
}