Random image generator with no repeats

noobatjavascrip · 10-25-2012, 03:24 AM

I have a table filled with 9 images. I have a loop that goes through 9 times and a random number generator inside my loop. I can get all of my images to scramble randomely. The problem is I only want each image to show up one time. I have been at it for a while now and can not figure it out. Even any help would be appreciated or a way to approach the problem.

Thanks

<html>
<head>
<script>
var pictures = new Array (9)
pictures[0] = "tree0_01.jpg"
pictures[1] = "tree0_02.jpg"
pictures[2] = "tree0_03.jpg"
pictures[3] = "tree0_04.jpg"
pictures[4] = "tree0_05.jpg"
pictures[5] = "tree0_06.jpg"
pictures[6] = "tree0_07.jpg"
pictures[7] = "tree0_08.jpg"
pictures[8] = "tree0_09.jpg"

function scramble(){

for (i=0;i<9;i++){
r=Math.floor(Math.random()*8)
document.images[i].src=pictures[r]

}

}
</script>
</head>
<body>
<center><table id="Table_01" width="600" height="600" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="tree0_01.jpg" width="200" height="200" ></td>
<td>
<img src="tree0_02.jpg" width="200" height="200" ></td>
<td>
<img src="tree0_03.jpg" width="200" height="200" ></td>
</tr>
<tr>
<td>
<img src="tree0_04.jpg" width="200" height="200" ></td>
<td>
<img src="tree0_05.jpg" width="200" height="200" ></td>
<td>
<img src="tree0_06.jpg" width="200" height="200" ></td>
</tr>
<tr>
<td>
<img src="tree0_07.jpg" width="200" height="200" ></td>
<td>
<img src="tree0_08.jpg" width="200" height="200" ></td>
<td>
<img src="tree0_09.jpg" width="200" height="200" ></td>
</tr>
</table><br>
<input type="button" onclick="scramble()" value="scramble"></center></br>
</body>
</html>

rnd me · 10-25-2012, 07:25 AM

Code:

var pictures = new Array (9)
pictures[0] = "tree0_01.jpg"
pictures[1] = "tree0_02.jpg"
pictures[2] = "tree0_03.jpg"
pictures[3] = "tree0_04.jpg"
pictures[4] = "tree0_05.jpg"
pictures[5] = "tree0_06.jpg"
pictures[6] = "tree0_07.jpg"
pictures[7] = "tree0_08.jpg"
pictures[8] = "tree0_09.jpg"

Array.prototype.shuffle=function(){
  function Rnd(w) {return parseInt(Math.random() * (w + 1));}
  var that= ([]).concat(this),mx=that.length, r=[], mx2 = mx-1;
  for(var i=0; i< mx; i++){
		var slot= Rnd(mx2 - i );
		r[i]=that.splice(slot  , 1)[0];
  }
  return r;
}//end shuffle

pictures=pictures.shuffle();


function scramble(){

for (i=0;i<9;i++){
  document.images[i].src=pictures[i];
}	

}

noobatjavascrip · 10-26-2012, 04:18 AM

I appreciate the quick response

I added the code before the scramble() function, but it did not work.

If you have anymore input that would be great

noobatjavascrip · 10-26-2012, 04:23 AM

I apologize, it does work. But only one time. I have to refresh the page every time. Is there anyway to have it work everytime I push the scramble button