Array returns 'undefined' result

Question

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>

I think you are excluding some code here, for example BrandNameArray isn't defined as the error stated. Also I've included jQuery in your example. — Spencer Wieczorek
– Spencer Wieczorek, Commented Jul 27, 2016 at 6:05
in click of image how selectBrand() function identifying that displayed image is brand so that has to display offer image or image is offer so that it has to display print image? — Rajesh Kathiriya
– Rajesh Kathiriya, Commented Jul 27, 2016 at 6:25
@RajeshKathiriya, if i have not misunderstood you, the following line of code: selectedOffer = Array_F[Brand_list[index - 1]]; will take the value that has been stored from Brand_list.push(random_BrandIndex);, to get the offer image — Luke
– Luke, Commented Jul 27, 2016 at 6:29

madalinivascu · Accepted Answer · 2016-07-27 06:45:45Z

1

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>

edited Jul 27, 2016 at 6:45

answered Jul 27, 2016 at 5:58

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Luke Over a year ago

I dont get your meaning to the solution. and I would like to try to refrain from changing the code too much.. your solution is provided based on individual img id, while, my code is based on an event handler "selectBrand(index)"

Luke Over a year ago

secondly, i have tried as well, and the return value is always at -1

madalinivascu Over a year ago

i see, indexOf doesn't find the image because the src is absolute

Luke Over a year ago

meaning? cause I need to see the file path name of the last array when I clicked on the second array

Luke Over a year ago

so for $(#"GameBrand_1") will be the same as well? and I will have to remove my function selectBrand(index)?

|

Collectives™ on Stack Overflow

Array returns 'undefined' result

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related