images in alphabetical order are stacked when button onclick

Question

Functionality:

When users enter the main menu page, the set of image items are already arranged and displayed in alphabetical order. User can then get to choose different category buttons, Button A will return a set of images with the same sorting alphabetical order while button B will return another set of images with the same sorting alphabetical order.

What have I done

I have 3 sets of array of image source:

1.) All images source 2.) ButtonA category images source 3.) ButtonB category image source

I have grab all images from array(All images source), and insert into a particular location say: <div class="Container"><div id= "list" class="innerScroll"></div></div>. The images are then displayed in accordance to alphabetical order.

This is the code for your perusal.

var BrandNameArray = ['http://lorempizza.com/380/240',
  'http://dummyimage.com/250/ffffff/000000',
  'http://lorempixel.com/g/400/200/',
  'http://lorempixel.com/g/400/200/sports/'
];

var CategoryA = ['http://lorempizza.com/380/240',
  'http://dummyimage.com/250/ffffff/000000'
];
var CategoryB = [
  'http://lorempixel.com/g/400/200/',
  'http://lorempixel.com/g/400/200/sports/'
];
$(function() {
  //Append array of images to list container in alphabetical Order
  BrandNameArray.forEach(function(cur, index, arr) {
    var img = document.createElement('img');
    img.src = cur;
    docFrag.appendChild(img);
  });
  container.appendChild(docFrag);
});

function CatA() {


  //Append array of images to list container in alphabetical Order
  CategoryA.forEach(function(cur, index, arr) {
    var img = document.createElement('img');
    img.src = cur;
    docFrag.appendChild(img);
  });
  container.appendChild(docFrag);

}

function CatB() {

  CategoryB.forEach(function(cur, index, arr) {
    var img = document.createElement('img');
    img.src = cur;
    docFrag.appendChild(img);
  });
  container.appendChild(docFrag);
}

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

<div id="ChooseBrand" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display:none; z-index=3; top:0px; left:0px;">
  <div class="Container">
    <div id="list" class="innerScroll"></div>
  </div>
  <button id="CatA" onclick="CatA()">
  </button>
  <button id="CatB" onclick="CatB()">
  </button>

Issue:

When I click on either of buttonA or buttonB, the respective images are added onto the current list of images.

For Example, at this point in time, at the menu page:

1.) all images are sorted and displayed.

2.) when I clicked on the button A: the images from categoryA array is added into the list ontop of the menu image.

3.) when I clicked on the button B: the images from categoryB array is added into the list ontop of the menu image and categoryA image that is displayed.

Hence, all the images are just adding onto each displayed list.

Hence, at this point in time, there are additional and repeated image. Would like to ask, how am I able to rectify the issue as described?

Thanks.please help.

score 1 · Accepted Answer · edited May 23 '17 at 11:45

1

i feels You have forgotten to remove all the images from the container before appending . So do this ,it should work .please let me know if it solve your issue

var myNode = document.getElementById("foo");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);

}

you can also check this question Remove all child elements of a DOM node in JavaScript

edited May 23 '17 at 11:45

Community

1
1

answered Apr 01 '16 at 05:02

Alok

881
1
11
18

I have added like this ` $('list').parent().remove();` then the individual 'forEach function(){..}' code. But it is still displaying the previous list of images – Luke Apr 01 '16 at 05:45

images in alphabetical order are stacked when button onclick

1 Answers1