Luke Luke - 4 months ago 7
Javascript Question

Array returns 'undefined' result

I have 3 arrays:

Array E = ["lib/img/Brand/A.png", "lib/img/Brand/B.png", "lib/img/Brand/C.png"];
Array F = ["lib/img/offer/A1.png", "lib/img/offer/B1.png", "lib/img/offer/C1.png"];
Array G = ["lib/img/print/A2.png", "lib/img/print/B2.png", "lib/img/print/C2.png"];


Secondly, I have created 2 img tag to display 2 randomly generated array item from Array E.

Thirdly, when I clicked on either one of the randomly generated image from Array E in the img tag, an image from Array F will be displayed.

E.g:
img tag is showing item A.png and item C.png from Array E, and when i clicked on item A.png from Array E, item A1.png from Array F will be displayed.

Lastly, when i clicked the item shown from Array F, the corresponding item from Array G will be displayed.

E.g:
img tag is showing item B.png and item A.png from Array E, and when i clicked on item B.png from Array E, item B1.png from Array F will be displayed. And When i clicked on item B1.png from Array F, item B2.png will be displayed.

What I have done:

I have managed to display 2 randomly generated items from Array E and when i click on either of the image item from Array E, I am able to get the correct image item from Array F.

Issue:

However, when i clicked on the image item from Array F, i am unable to get any image item from Array G, when i do a console.log for Array G, it returns a result of undefined. And none of the item in Array G is actually append with Array F.

Could I please get some help in what i have done wrong.

*Code: *



Array_E = ["lib/img/Brand/A.png", "lib/img/Brand/B.png", "lib/img/Brand/C.png"];
Array_F = ["lib/img/offer/A1.png", "lib/img/offer/B1.png", "lib/img/offer/C1.png"];
Array_G = ["lib/img/print/A2.png", "lib/img/print/B2.png", "lib/img/print/C2.png"];
var Brand_list = [];
var printOfferFrame = "";

//Randomised Brand Offer
//Auto populate into brand container once randomised
$('#BrandWinlist > img').each(function(i, img) {
random_BrandIndex = Math.floor(Math.random() * Array_E.length);
console.log("random_BrandIndex:" + random_BrandIndex);

var Brand = Array_E[random_BrandIndex];

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

function selectBrand(index) {
selectedOffer = Array_F[Brand_list[index - 1]];
console.log("selectedOffer: " + selectedOffer);
$("#Pa_Description").attr('src', selectedOffer).show();

//THIS IS THE PART I AM HAVING AN ISSUE, RETURN RESULT IS UNDEFINED
var printOfferSelected = Brand_list[Brand_list.length - 1];
console.log("printOfferSelected : " + printOfferSelected);

printOfferFrame = Array_G[parseInt(Array_F[Brand_list[index - 1]])];

console.log("printOfferFrame : " + Array_G[printOfferSelected - 1]);
}

function PrinOffer() {
ajax_Print();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>

<div id="BrandDescription" class="BrandMenu" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=9; top:0px; margin:auto;">

<img id="Pa_Description" class="BrandDescription" style="position:absolute; width: 1080px; height:762px; top:500px; left:0px; z-index=99;">

<button class="Print" onclick="PrintOffer()"></button>
</div>




Answer

Try the following:

Array_E = ["lib/img/Brand/A.png", "lib/img/Brand/B.png", "lib/img/Brand/C.png"];
Array_F = ["lib/img/offer/A1.png", "lib/img/offer/B1.png", "lib/img/offer/C1.png"];
Array_G = ["lib/img/print/A2.png", "lib/img/print/B2.png", "lib/img/print/C2.png"];


//Randomised Brand Offer
//Auto populate into brand container once randomised
$('#BrandWinlist > img').each(function(i, img) {
  random_BrandIndex = Math.floor(Math.random() * Array_E.length);
  console.log("random_BrandIndex:" + random_BrandIndex);
  var Brand = Array_E[random_BrandIndex];
  $(img).attr({'src':Brand,'data-index':random_BrandIndex}).show();
});
$('.GameWinBrand_innerScroll img').on('click',function(e){
  e.preventDefault();
  index = $(this).attr('data-index');//get index of the img
  $("#Pa_Description").attr('src', Array_F[index]).show();//here you may need to use parent to show it
   console.log("printOfferSelected : " + Array_F[index]);
  console.log("printOfferFrame "+Array_G[index]);//alert the image from the index provided by the index attribute
});

function PrinOffer() {
  ajax_Print();
}
.GameWinBrand_Container {
  position: absolute;
  top: 950px;
  left: 286px;
  height: 250px;
  width: 500px;
  overflow: hidden;
}
.GameWinBrand_innerScroll {
  position: relative;
  width: 480px;
  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;
}
.BrandMenu {
  background-color: #D3D3D3;
  filter: alpha(opacity=98);
  opacity: 0.98;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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" >
    <img id="GameBrand_2" style="width:230px; height:230px; top:0px; left:330px; border:0px;" >
  </div>
</div>

<div id="BrandDescription" class="BrandMenu" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=9; top:0px; margin:auto;">

  <img id="Pa_Description" class="BrandDescription" style="position:absolute; width: 1080px; height:762px; top:500px; left:0px; z-index=99;">

  <button class="Print" onclick="PrintOffer()"></button>
</div>