Javascript use image id as a string when particular image is clicked on

Question

I have two tasks i wish to accomplish.

1. Store id of an image when it is clicked... so say image with an id of 3 is clicked this i wish saved to a variable for use later
2.Next i wish to then take this variable to another function and use within an if conditional

The issue here is i havent an idea as to how to do this... i get the id through a for loop and these ids are random so it needs to be when the image is clicked the id from the image is displayed and then placed into the variable. The next part is a simple search mechanism using the id so that it displays only one result depending on which image is chosen

so img is clicked - id is saved in var - var is passed to function

Here is the code

This is the function which creates the images from the json data

   function getExhibitions()
{
$('#searchcontent').hide();
$('#searchby').hide();
$('#detailscontent').hide();
$('#exhibitioncontent').show();
$('#exhibitioncontent').empty();

myExhibitionsView = document.getElementById('exhibitioncontent');
images = document.createElement('ul');

for (var i = 0; i < json.length; i++) {
    for (var j = 0; j < json[i].exhibits.length; j++) {
        listCheck = document.createElement('div');
        listCheck.id = "image";
        listCheck.innerHTML = "<a href= '#imagechoice'>" + "<img id=" + json[i].exhibits[j].exhibit_id + " " + "onclick='getImagesDetails();' src = " + "./images/" + json[i].exhibits[j].exhibit_image + " height='200' width='200'" + ">";
        myExhibitionsView.appendChild(images);
        images.appendChild(listCheck);
    }
}


}

now is the function i wish the image id passed to

function getImagesDetails(){

       $('#exhibitioncontent').hide();
       $('#searchby').hide();
       $('#searchcontent').hide();
       $('#detailscontent').show();

      details = document.createElement('ul');
      var exhibit_id;
    json.forEach(function (element) {
        for (var j = 0; j < element.exhibits.length; j++) {
           if (element.exhibits[j]['exhibit_id'] === exhibit_id) {
                  var listDetails;
                  listDetails = document.createElement('p');
                  listDetails.id = 'image' + j;
                  listDetails.innerHTML = "<img src = " + "./images/" + element.exhibits[j].exhibit_image + " height='400' width='400'>" + " " + "Title = " + element.exhibits[j].exhibit_title + '</br>'
                  + "Description = " + element.exhibits[j].exhibit_description + '</br>'
                  + "Photography By = " + element.exhibits[j].photographer ;
                  console.log(listDetails);
                  $("#detailscontent").empty().append(details);
                  details.appendChild(listDetails);

              }
          }
      });


  }

the exhibit_id is where i want to store the uniquely generated id. Thanks i appreciate any assistance in this problem

score 0 · Answer 1 · answered Jun 11 '15 at 20:01

0

Use jquery to get your image id not a for loop

$('img').on('click',function(){
    var iid=$(this).attr('id');
});

answered Jun 11 '15 at 20:01

depperm

10,606
4
43
67

this is placed in the getimageDetails()? – questionman123 Jun 11 '15 at 20:02
I don't see anywhere in that function where you get the clicked img id, exhibit_id is never initialized or set to a value that I can see. – depperm Jun 11 '15 at 20:04
okay the id is taken from – questionman123 Jun 11 '15 at 20:12
that is the edit as requested... do u have any suggestion for me now? Thanks – questionman123 Jun 11 '15 at 20:21
exhibit_id doesn't seem to be global but your using it in getExhibitions(), you need to clean your code up and clarify your question a bit more for help. If you just want to get the id of the img clicked then call a function with an if conditional, this can be done in very little code, see answer, just add an if after – depperm Jun 11 '15 at 20:28
thanks i actually found an incredibly simple way of doing this but thank you the answer – questionman123 Jun 11 '15 at 20:33

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

This i found while researching my question from another angle but this simple solution works... Not in any way my answer simply a link to the correct one

JavaScript - onClick to get the ID of the clicked button - accepted answer

edited May 23 '17 at 11:43

Community

1
1

answered Jun 11 '15 at 20:32

questionman123

19
3

Javascript use image id as a string when particular image is clicked on

2 Answers2