Randomised Generated Image is still showing duplicate

Question

I have created an array of randomly generated images. And 2 of the randomly generated images are to be displayed in an image tag. However, the current issue faced is that the 2 random images displayed in the image tag can be the same images.

How am I able to prevent 2 identical randomly generated image from displaying. Is there another method besides using: .splice(parameter,1);???

var BrandNameArray = ["lib/img/Brands/A.png", "lib/img/Brands/B.png", "lib/img/Brands/C.png", "lib/img/Brands/D.png", "lib/img/Brands/E.png"];

var Brand_list = [];

//Auto populate into brand container once randomised
$('#BrandWinlist > img').each(function(i, img) {

  random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
  console.log("random_BrandIndex:" + random_BrandIndex);

  //Assign Variable to generate random Brands
  var Brand = BrandNameArray[random_BrandIndex];

  //BrandNameArray.splice(random_BrandIndex,1);

  Brand_list.push(random_BrandIndex);
  $(img).attr('src', Brand).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="GameWinBrand_Container">
  <div id="BrandWinlist" class="GameWinBrand_innerScroll">
    <img id="GameBrand_1" style="width:230px; height:230px; top:0px; left:0px; border:0px; outline:0px" onclick="selectBrand('1');">
    <img id="GameBrand_2" style="width:230px; height:230px; top:0px; left:330px; border:0px;" onclick="selectBrand('2');">
  </div>
</div>

instead of random index, maybe you can randomize the array, [shuffle array](http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array) — dadan, Aug 01 '16 at 03:48

guest271314 · Answer 1 · 2016-08-01T04:51:40.687

0

You can use .slice() to create copy of original array, .splice(random_BrandIndex, 1) to remove item from copy

var BrandNameArray = ["lib/img/Brands/A.png", "lib/img/Brands/B.png", "lib/img/Brands/C.png", "lib/img/Brands/D.png", "lib/img/Brands/E.png"];

var Brand_list = [];

var copy = BrandNameArray.slice(0);

//Auto populate into brand container once randomised
$('#BrandWinlist > img').each(function(i, img) {

  random_BrandIndex = Math.floor(Math.random() * copy.length);
  console.log("random_BrandIndex:" + random_BrandIndex);

  //Assign Variable to generate random Brands
  var Brand = copy.splice(random_BrandIndex, 1)[0];
  console.log(Brand);
  //BrandNameArray.splice(random_BrandIndex,1);

  Brand_list.push(random_BrandIndex);
  $(img).attr('src', Brand).show();
});
console.log(copy)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="GameWinBrand_Container">
  <div id="BrandWinlist" class="GameWinBrand_innerScroll">
    <img id="GameBrand_1" style="width:230px; height:230px; top:0px; left:0px; border:0px; outline:0px" onclick="selectBrand('1');">
    <img id="GameBrand_2" style="width:230px; height:230px; top:0px; left:330px; border:0px;" onclick="selectBrand('2');">
  </div>
</div>

edited Aug 01 '16 at 04:51

answered Aug 01 '16 at 03:45

guest271314

1
15
104
177

what is the difference? I dont get what you are doing. I do not want to use .splice() as it will mess up the later part of the array code. Hence, is there any other way besides making use of .splice() – Luke Aug 01 '16 at 04:10
@Luke _"what is the difference? I dont get what you are doing."_ Make a copy of original array, use `.splice()` to remove random item within copy array to prevent duplicate item from being selected at next iteration of `.each()`. _"I do not want to use .splice() as it will mess up the later part of the array code."_ The original array will not be affected by `.splice()`, the copy of original array will have two items removed at conslusion of `.each()`. Yes, there are other possible approaches – guest271314 Aug 01 '16 at 04:17
so, if the 2 items have been removed from the 1st array, does that mean the index for the 1st array will be changed too? and that would mean that if the 2nd array is to reference the 1st array, it will be referencing to the 1st array with the 2 removed items? – Luke Aug 01 '16 at 04:25
@Luke `BrandNameArray`:original array, `copy`: copy of `BrandNameArray`. Changes to `copy` will not be reflected in `BrandNameArray`, nor will changes to `BrandNameArray` be reflected in `copy`; see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice – guest271314 Aug 01 '16 at 04:28
ohh, ok...so what you are doing is this, is to push all random generated image into a temporary var element. But the original random generated image is not touched at all, except the copy var which is only used to display within my image tag. Did i get your idea correctly? – Luke Aug 01 '16 at 04:28
@Luke Yes, _"For strings and numbers (not String and Number objects), slice copies strings and numbers into the new array. Changes to the string or number in one array does not affect the other array."_, though note _"For object references (and not the actual object), slice copies object references into the new array. Both the original and new array refer to the same object. If a referenced object changes, the changes are visible to both the new and original arrays."_ – guest271314 Aug 01 '16 at 04:30
There is an a typeError: cannot read property of 'slice' of undefined. is there any declaration that should be needed/ – Luke Aug 01 '16 at 04:40
@Luke Are you using other `javascript` than appears at Question? Is `BrandNameArray` defined? Can you reproduce error at stacksnippets or plnkr http://plnkr.co? – guest271314 Aug 01 '16 at 04:43
what do you mean by other javascript? `BrandNameArray` is defined, it is defined as an array – Luke Aug 01 '16 at 04:49
The issue could be that `.splice()` returns an array. Try substituting `var Brand = copy.splice(random_BrandIndex, 1)[0]` for `var Brand = copy.splice(random_BrandIndex, 1);`, see updated post – guest271314 Aug 01 '16 at 04:50
nope still having the typeError issue. It seems that it is reading splice as a variable and not a method – Luke Aug 01 '16 at 04:53
Can you reproduce the `TypeError` at jsfiddle http://jsfiddle.net, plnkr http://plnkr.co or stacksnippets? – guest271314 Aug 01 '16 at 04:54
@Luke `var copy = BrandNameArray.slice()` was placed before declaration of `var BrandNameArray = []` at version 1 of http://plnkr.co/edit/F7b76gkEjNSplsSM2KwS?p=catalogue; also, jquery was not defined, see http://plnkr.co/edit/F7b76gkEjNSplsSM2KwS?p=catalogue at version 3 – guest271314 Aug 01 '16 at 04:58
I am having this issue now: the 2nd image tag for the return image sometimes return with an index of plus 1: meaning when image return is supposed to be B.png, it returns a C.png. It does not occur on a consistent basis. and it only happens on the second image tag. The reason i have gathered for this behaviour is because of the .splice method. since it removes 1 element, it kind of messes up the entire index arrangement – Luke Aug 01 '16 at 05:10
@Luke Not following? No duplicate images should be set as `src` of image. What do you mean by "messes up the entire index arrangement"? – guest271314 Aug 01 '16 at 05:13
ok, I have 2 image tags to display the randomly generated image, in which i have given the id as `GameBrand_1` and `GameBrand_2`. So, rightfully, no duplicate images should be set in the 2 image tags above. However, for the 2nd image tag `GameBrand_2`, it has this weird behaviour whereby it returns the wrong image as what it should be showing from the return random index. Meaning: if the randomy genereated array index is 1, `GameBrand_2` should be showing an image for array index = 1, however, sometimes it will be showing the image with array index = 2 – Luke Aug 01 '16 at 05:20
The items are removed from `copy` array. If item at index `0` is removed, item at index `1` would then be shifted to index `0` of the `copy` array, similarly for the remainder of items within `copy` array. – guest271314 Aug 01 '16 at 05:36
That would mean ``GameBrand_2`` will need another method? cause, it seems that populating of the image tag is incorrect after the spice.It should only remove the duplicate but not touch the original array index/ arrangements – Luke Aug 01 '16 at 05:43
@Luke If you are referencing `BrandList` array indexes you can use `BrandList.push(BrandNameArray.indexOf(Brand))` – guest271314 Aug 01 '16 at 05:49
@Luke See http://plnkr.co/edit/ZSciU0DI95ts2pQQ10DX?p=preview at version 5 – guest271314 Aug 01 '16 at 06:00

Randomised Generated Image is still showing duplicate

1 Answers1