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