Images duplicates when function is selected. Javascript

88 Views Asked by At

Here is the what the solution should look like whenever the user clicks the link

new york
image image image

however when i do this again i get this error

new york
image image image
image image image

why does this occur...

Here is my code

 function getImageCategories() {

      images = document.createElement('ul');
    $('#categories').on('click', 'li>a', function () {
    ex_id = $(this).closest('li').index();
      ex_id = ex_id.toString();
      getResults();
           });
  }

  function getResults(){
        myExhibitionsView = document.getElementById('exhibitioncontent');
        document.getElementById('exhibitioncontent').innerHTML = "";
      json.forEach(function (element) {
          console.log(ex_id);
          if (element['exhibition_id'] === ex_id) {
              for (var j = 0; j < element.exhibits.length; j++) {
                  list = document.createElement('p');
                  list.id = 'image' + j;
                  list.innerHTML = "<img src='./images/" + element.exhibits[j].exhibit_image + "' alt='Photo Cover' height='200' width='200'>";
                  console.log(list);
                  myExhibitionsView.appendChild(images);
                  images.appendChild(list);

              }
          }
      });
  }

function 1 gets correct id for use when filtering and then 2nd function displays the correct data so why have duplicates? Thanks

HTML...

<ul id="categories">
                <li class="filter">Categories:</li>
                <li id="ny"><a href="#newYork" onclick="getImageCategories()"> New York</a></li>
                <li id="sc"><a href="#spanishCities" onclick="getImageCategories()">Spanish Cities</a></li>
                <li id="gv"><a href="#aGlasgowViewpoint" onclick="getImageCategories()">A Glasgow Viewpoint</a></li>
                <li id="sch"><a href="#someChurches" onclick="getImageCategories()">Some Churches</a></li>
                <li id="bh"><a href="#barcelonaHighlights" onclick="getImageCategories()">Barcelona Highlights</a></li>
                <li id="mp"><a href="#martin's Pictures" onclick="getImageCategories()">Martin’s Pictures</a></li>
            </ul>
        </div><!-- end .grid_12 - CATEGORIES -->

When the link is clicked... function is called

0

There are 0 best solutions below