Q:

Show random div javascript, only displays div sometimes

I am trying to set up a 404 page so that it will show a random graphic each time a user hits it. Currently the way I have it coded, the graphic is only loaded some of the time(I'd say it's about 50/50 right now). Just looking for a better way to code it so that one of the divs will be shown every time.
Here is my HTML:
<div id="errorpages">
    <div class="error">
        <img src="404.gif">
    </div>

    <div class="error">
        <img src="4042.gif">
    </div>
</div>

And the JavaScript:
<script type="text/javascript">
this.random404 = function(){
    var length = $("#errorpages div").length;
    var ran = Math.floor(Math.random()*length) + 1;
    $("#errorpages div:nth-child(" + ran + ")").show();
};
$(document).ready(function(){
    $('.error').hide();
    random404();
});
</script>

Any help would be greatly appreciated, thanks!

A:

Why circulate divs? It adds to much additional code. Just set the images to an array and work off of Math.rand from there. Jquery not necessary. 
<script type="text/javascript">
var images = [], index = 0;
images[0] = "Caption 0 <img src='1.gif'>";
images[1] = "Caption 1 <img src='2.gif'>";
images[2] = "Caption 2 <img src='3.gif'>";
images[3] = "Caption 3 <img src='4.gif'>";
images[4] = "Caption 4 <img src='5.gif'>";
images[5] = "Caption 5 <img src='6.gif'>";
images[6] = "Caption 6 <img src='7.gif'>";
images[7] = "Caption 7 <img src='8.gif'>";
index = Math.floor(Math.random() * images.length);
document.write("<p>Head</p>" + images[index] + "<p>Foot</p>");
</script>

