Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Random image generator with no repeats

    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>

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 592 Times in 572 Posts
    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];
    }	
    
    }
    Last edited by rnd me; 10-25-2012 at 07:30 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #3
    New Coder
    Join Date
    Sep 2012
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    New Coder
    Join Date
    Sep 2012
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •