Luke Luke - 2 months ago 7
Javascript Question

Randomised Image is displayed more than once

Functionality:

Brand image is randomised and is displayed within the container list. Each of the randomised brand image needs to be only displayed once.

What has been done:

Firstly, I have created an array of image files as

var ImageArray=["","","",....]
. Secondly, I have created a randomised method as var
random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
and lastly, I created a for loop that will allow the image to populate the table created within the html body.

I have attached the code for your perusal:



//Brand Array
var BrandNameArray = ["lib/img/PAGE03/Brands/Ads.png", "lib/img/PAGE03/Brands/AEO.png", "lib/img/PAGE03/Brands/AO.png", "lib/img/PAGE03/Brands/Beauty.png", "lib/img/PAGE03/Brands/Be.png", "lib/img/PAGE03/Brands/DS.png", "lib/img/PAGE03/Brands/Cch.png", "lib/img/PAGE03/Brands/Coton.png", "lib/img/PAGE03/Brands/Dwel.png", "lib/img/PAGE03/Brands/esBr.png", "lib/img/PAGE03/Brands/Et.png", "lib/img/PAGE03/Brands/E.png"];

$(function() {
//Auto populate into brand container once randomised for each Brand image
for (i = 0; i < $('#list').find('img').length; i++) {
//To Set random Brand
var random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
//Assign Variable to generate random Brands
var Brand = BrandNameArray[random_BrandIndex];
$('#Brand_' + (i + 1)).attr('src', Brand);
$('#Brand_' + (i + 1)).show();
console.log(Brand);
}
});

.Container {
position: absolute;
top: 300px;
left: 300px;
height: 600px;
width: 1250px;
overflow-y: scroll;
}
.innerScroll {
position: relative;
width: 1250px;
height: 600px;
font-size: 25px;
color: #8d8989 !important;
overflow: scroll;
}

<div class="Container">
<div id="list" class="innerScroll">
<!--1st Row-->
<img id="Brand_1" style="width:284px; height:140px; top:0px; left:0px; border:0px; outline:0px" onclick="selectBrand('1');">
<img id="Brand_2" style="width:284px; height:140px; top:0px; left:330px; border:0px;" onclick="selectBrand('2');">
<img id="Brand_3" style="width:284px; height:140px; top:0px; left:650px; border:0px;" onclick="selectBrand('3');">
<img id="Brand_4" style="width:284px; height:140px; top:0px; left:965px; border:0px;" onclick="selectBrand('4');">

<!--2nd Row-->
<img id="Brand_5" style="width:284px; height:140px; top:140px; left:0px; border:0px;" onclick="selectBrand('5');">
<img id="Brand_6" style="width:284px; height:140px; top:140px; left:330px; border:0px;" onclick="selectBrand('6');">
<img id="Brand_7" style="width:284px; height:140px; top:140px; left:650px; border:0px;" onclick="selectBrand('7');">
<img id="Brand_8" style="width:284px; height:140px; top:140px; left:965px; border:0px;" onclick="selectBrand('8');">

<!--3rd Row-->
<img id="Brand_9" style="width:284px; height:140px; top:280px; left:0px; border:0px;" onclick="selectBrand('9');">
<img id="Brand_10" style="width:284px; height:140px; top:280px; left:330px; border:0px;" onclick="selectBrand('10');">
<img id="Brand_11" style="width:284px; height:140px; top:280px; left:650px; border:0px;" onclick="selectBrand('11');">
<img id="Brand_12" style="width:284px; height:140px; top:280px; left:965px; border:0px;" onclick="selectBrand('12');">

<!--4th Row-->
<img id="Brand_09" style="width:284px; height:140px; top:280px; left:0px; border:0px;" onclick="selectBrand('9');">
<img id="Brand_10" style="width:284px; height:140px; top:280px; left:330px; border:0px;" onclick="selectBrand('10');">
<img id="Brand_11" style="width:284px; height:140px; top:280px; left:650px; border:0px;" onclick="selectBrand('11');">
<img id="Brand_12" style="width:284px; height:140px; top:280px; left:965px; border:0px;" onclick="selectBrand('12');">.....(more rows of images)...
</div>
</div>





Issue:

At this point in time, the randomised images are displaying. However, some of the images displayed are displayed more than once.

Therefore, How is it possible for the randomised image to be only displayed once within the
<div id ="list">
?

please help. your help is much much appreciated.

Answer

After getting the element from the array, remove the item so that you don't get it again

var Brand = BrandNameArray[random_BrandIndex]; //existing line
BrandNameArray.splice(random_BrandIndex,1); //new line 

Also, this array enclosed inside an anonymous method so you can be sure that this array is not used outside.

I am referring to this anonymous method (i have made the changes as well)

$(function() {
  var BrandNameArrayBackup = JSON.parse(JSON.stringify(BrandNameArray)); //taking backup
  //Auto populate into brand container once randomised for each Brand image
  for (i = 0; i < $('#list').find('img').length; i++) {
    //To Set random Brand
    var random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
    //Assign Variable to generate random Brands
    var Brand = BrandNameArray[random_BrandIndex];
    BrandNameArray.splice(random_BrandIndex,1); //new line 
    $('#Brand_' + (i + 1)).attr('src', Brand);
    $('#Brand_' + (i + 1)).show();
    console.log(Brand);
  }
  BrandNameArray = BrandNameArrayBackup;//re-assigning values back to array
});
Comments