Luke Luke - 4 months ago 9
Javascript Question

Randomised Array is not appended to id tag

I have set a method to randomised an array of images. These randomised images will then be appended to the id tag within the html body. I have set 2 image id and have tried to append the randomised image array to the image id.

However, no images are being displayed.

Hence, what has been done wrong? please help.

Code:



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

function Game_Congrats() {



//Randomised Brand Offer
//Auto populate into brand container once randomised
for (i = 0; i < $('#list').find('img').length; i++) {

random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);

//Assign Variable to generate random Brands
var Brand = BrandNameArray[random_BrandIndex];
BrandNameArray.splice(random_BrandIndex, 1);
$('#Brand_' + (i + 1)).attr('src', Brand);
$('#Brand_' + (i + 1)).show();
}
}

}

.GameWinBrand_Container {
position: absolute;
top: 950px;
left: 286px;
height: 250px;
width: 580px;
overflow: hidden;
}
.GameWinBrand_innerScroll {
position: relative;
width: 550px;
font-size: 30px;
text-align: justify;
color: #ffffff !important;
overflow: hidden;
}
.GameWinBrand_Container::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 12px;
background-color: #ffffff;
}
.GameWinBrand_Container::-webkit-scrollbar {
width: 12px;
background-color: #5e5767;
}
.GameWinBrand_Container::-webkit-scrollbar-thumb {
border-radius: 20px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #5e5767;
}

<div class="GameWinBrand_Container">
<div id="BrandWinlist" class="GameWinBrand_innerScroll">
<img id="GameBrand_1" style="width:250px; height:230px; top:0px; left:0px; border:0px; outline:0px" onclick="selectBrand('1');">
<img id="GameBrand_2" style="width:250px; height:230px; top:0px; left:330px; border:0px;" onclick="selectBrand('2');">
</div>
</div>




Answer

You have a bunch of wrong id references:

First of all your loop does not execute, because you do not have an element with id list.

Secondly you don't have image elements with id Brand_1, ... etc.

So change your code to this:

for (i = 0; i < $('#BrandWinlist').find('img').length; i++) {
    random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
    //Assign Variable to generate random Brands
    var Brand = BrandNameArray[random_BrandIndex];
    BrandNameArray.splice(random_BrandIndex, 1);
    $('#GameBrand_' + (i + 1)).attr('src', Brand).show();
}

Note that you can chain the call to show.

Also the selector and loop can be written more concisely as follows:

$('#BrandWinlist > img').each(function (i, img) {
    random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
    //Assign Variable to generate random Brands
    var Brand = BrandNameArray[random_BrandIndex];
    BrandNameArray.splice(random_BrandIndex, 1);
    $(img).attr('src', Brand).show();
});

And as a bonus, you can splice and get the removed element in one go:

    var Brand = BrandNameArray.splice(random_BrandIndex, 1)[0];
Comments