0

I'm trying to display four images randomly with a related link, by avoiding to display duplicated images each time. I've found how to randomly display a random image with the link, but I have no idea how to create the loop part and how to check for duplicates. I would appreciate your help. 

<script>
function random_imglink(){
 var myimages=new Array()

 myimages[1]="image1.gif"
 myimages[2]="image2.gif"
 myimages[3]="image3.gif"
 myimages[4]="image4.gif"
 myimages[5]="image5.gif"
 myimages[6]="image6.gif"


 var imagelinks=new Array()
 imagelinks[1]="http://www.page1.com"
 imagelinks[2]="http://www.page2.com"
 imagelinks[3]="http://www.page3.com"
 imagelinks[4]="http://www.page4.com"
 imagelinks[5]="http://www.page5.com"
 imagelinks[6]="http://www.page6.com"

 var ry=Math.floor(Math.random()*myimages.length);

  if (ry==0)
    ry=1;

 document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>');
}

random_imglink()

</script>

Thanks in advance :)

Barak
  • 535
  • 6
  • 18
seesae
  • 21
  • 4

3 Answers3

0

Outside of your function, declare an array to hold elements that are already displayed:

var displayed = [];

Then after your if (ry==0) condition add this:

if (displayed.indexOf(ry) !== -1){
    displayed.push(ry);
    document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>');
} else {
    random_imglink();
}
Barak
  • 535
  • 6
  • 18
DrunkDevKek
  • 469
  • 4
  • 17
0

As stated on this answer, you can create a method for checking of duplicates.

method:

var contains = function(needle) {
  // Per spec, the way to identify NaN is that it is not equal to itself
  var findNaN = needle !== needle;
  var indexOf;

  if(!findNaN && typeof Array.prototype.indexOf === 'function') {
      indexOf = Array.prototype.indexOf;
  } else {
      indexOf = function(needle) {
          var i = -1, index = -1;

          for(i = 0; i < this.length; i++) {
              var item = this[i];

              if((findNaN && item !== item) || item === needle) {
                  index = i;
                  break;
              }
          }

          return index;
      };
  }

  return indexOf.call(this, needle) > -1;
};

usage:

var imagelinks= [0,1,2],
    index = contains.call(imagelinks, imagelinks[ry]); //boolean
Community
  • 1
  • 1
Barak
  • 535
  • 6
  • 18
0

You should learn about Constructors. When you call new on them they return an Object which has separate properties based on the Constructor. Below is some code that will help you along your journey.

//<![CDATA[
// external.js
var doc, bod, htm, C, E, inArray, ShuffleMagic; // for use on other loads
addEventListener('load', function(){

doc = document; bod = doc.body; htm = doc.documentElement;
C = function(tag){
  return doc.createElement(tag);
}
E = function(id){
  return doc.getElementById(id);
}
inArray = function(needle, haystack){
  for(var i=0,l=haystack.length; i<l; i++){
    if(haystack[i] === needle){
      return true;
    }
  }
  return false;
}
function ShuffleMagic(haystack){
  var a;
  this.haystack = haystack;
  this.alterOriginal = false;
  this.shuffle = function(limit){
    var r, s = this.haystack;
    if(!a){
      a = [].slice.call(s), l = a.length;
      for(var i=0,n=1,f,h; i<l; i++,n++){
        f = Math.floor(Math.random()*n); h = a[i]; a[i] = a[f]; a[f] = h;
      }
    }
    if(limit){
      if(a.length >= limit){
        r = a.splice(0, limit);
        if(a.length < limit)a = undefined;
      }
      else{
        a = undefined;
        return this.shuffle(s.length);
      }
    }
    else{
      r = a; a = undefined;
    }
    if(this.alterOriginal){
      s.splice.apply(s, [0, s.length].concat(r)); a = undefined;
    }
    return r;
  }
}
var imagelinks = ['http://www.page1.com', 'http://www.page2.com', 'http://www.page3.com', 'http://www.page4.com', 'http://www.page5.com', 'http://www.page6.com', 'http://www.page7.com', 'http://www.page8.com', 'http://www.page9.com',
'http://www.page10.com', 'http://www.page11.com', 'http://www.page12.com', 'http://www.page13.com', 'http://www.page14.com', 'http://www.page15.com', 'http://www.page16.com', 'http://www.page17.com', 'http://www.page18.com', 'http://www.page19.com'];
var max = E('limit'), out = E('out');
var wow = new ShuffleMagic(imagelinks);
// wow.alterOriginal = true;
// wow.haystack = ['Replace', 'other', 'array, 'example'];
E('testButton').addEventListener('click', function(){
  out.innerHTML = wow.shuffle(+max.value).join('<br />');
});

});
//]]>
/* external.css */
html,body{
  margin:0; padding:0;
}
.main{
  width:980px; margin:0 auto;
}
#limit{
  width:30px; padding-left:3px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <title>Shuffle Magic</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='test.js'></script>
  </head>
<body>
  <div class='main'>
    <label for='limit'>Limit:</label><input id='limit' name='limit' type='text' value='4' /><input id='testButton' type='button' value='Click Me' />
    <div id='out'></div>
  </div>
</body>
</html>

With this version, which is recursive (probably beyond your understanding right now), the array elements only recycle once they've been completely or nearly completely gone through. Enjoy!

StackSlave
  • 10,613
  • 2
  • 18
  • 35