Need random and unique number throughout page using javascript

Question

I am using javascript to wrap images on my webpage, but I would like to assign each image with a unique, yet random class name. The code below assigns a random class name, but it assigns the SAME class name to each image. How can I alter my code to allow each image to have a unique, yet random class name?

var randomnumber=Math.floor(Math.random()*10)

var bphotorightnomargin = document.getElementsByClassName("body-photo alignright no-margin-left");
$(bphotorightnomargin).toggleClass( "body-photo alignright no-margin-left" ).wrap( "<div class='body-photo-wrap body-photo-" + randomnumber + " alignright no-margin-left'></div>" );

Does it really have to be random? You could just keep a counter and append the count to each id, and then increment the count each time. — Pointy
– Pointy, Commented Feb 29, 2016 at 18:53
then call the random() function multiple times, once per image. you haven't shown any other code, but I'll bet you only generate ONE number, then re-use the variable you stored that number in over and over. and note that you'll likely end up with collisions VERY quickly, especially if you have 2 or more images, and are only generating a number between 1->10. — Marc B
– Marc B, Commented Feb 29, 2016 at 18:55
Why do you need a random class? How do you intend on using that class for anything useful at all. — adeneo
– adeneo, Commented Feb 29, 2016 at 18:55
if you want it to be random you're on the right track. Another question you might want to ask is do you want the random classes to duplicate, if not you need to account for this also and in this case your 'random' is not actually random. — Daniel Tate
– Daniel Tate, Commented Feb 29, 2016 at 18:56
@adeneo I have 9 classes that reposition the background image, giving the appearance of a varied border. This site will eventually be managed by the client. Rather than asking them to wrap each image in a div and give each div a unique class, I wanted to simplify their process and let the script do most of the work. Now they only need to apply one extra class ("body-photo") to their photos. — InfernalRed
– InfernalRed, Commented Mar 1, 2016 at 21:03

Abdul Ahmad · Accepted Answer · 2016-02-29 19:16:07Z

looks like you're reusing the same variable that you set the random number to. Wrap that in a function, and call the function instead:

function getRandomNumber() {
  return Math.floor(Math.random()*10);
}

then you can do this:

$(bphotorightnomargin).each(function() {
  $(this).toggleClass( "body-photo alignright no-margin-left" )
  .wrap( "<div class='body-photo-wrap body-photo-" 
    + getRandomNumber() 
    + " alignright no-margin-left'></div>" );
});

notice I added .each, which will iterate through your list of html elements, applying a unique class to each one.

but theres still a chance that the same number will come up multiple times. like you may get the number 5, 3 times. You can store numbers you already got in an array, and check to make sure that number doesn't come up again.

var existingNumbers = [];

function getRandomNumber() {
  var randomNum = Math.floor(Math.random()*10);
  while(!isUnique(randomNum)) {
    randomNum = Math.floor(Math.random()*10);
  }
  existingNumbers.push(randomNum);
  return randomNum;
}

function isUnique(number) {
  var length = existingNumbers.length;
  for(var i = 0; i < length; i++) {
    if(number === existingNumbers[i]) {
      return false;
    }
  }
  return true;
}

Taran J · Accepted Answer · 2016-02-29 19:05:13Z

0

Below is a very simple adjustment to your code. Adjust the classes as per need.

var randomnumber=Math.floor(Math.random()*10)

var imageArray = document.getElementsByClassName("class-a");
$.each(imageArray, function(index,value){
    $(value).wrap("<div class='class-b " + (randomnumber + index) + " class-c'></div>")
});

DEMO

answered Feb 29, 2016 at 19:05

Taran J

8056 silver badges10 bronze badges

Collectives™ on Stack Overflow

Need random and unique number throughout page using javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related