How determine which object/image was clicked using javascript/html -

Basically, I have a page in which 100 image thumbnails are being displayed in the form:

  Document.getElementById ('feedback'). Internal HTML + = "& lt; a href = '#' & gt; & lt; IMG src =" + FeedbackAbject.it [0] .snippet.thumbnails.high.url + "/> & lt; / a & Gt; "; Document.getElementById ('response'). Internal HTML + = "& lt; a href = '#' & gt; & lt; IMG src =" + FeedbackAbject.it [1] .snippet.thumbnails.high.url + "/> & lt; / a & Gt; "; Document.getElementById ('response'). Internal HTML + = "& lt; a href = '#' & gt; & lt; IMG src =" + FeedbackAbject.it [2] .snippet.thumbnails.high.url + "/>  / a & Gt; ";  

And so on if it matters, then I am working with an array of objects that are made of parsed JSON. Anyway, when the user clicks on one of the images, I should call a function, say the ShowVideo, and I have to know which image item (item [1], item [2]) were actually clicked , So I can send it to me and display the embedded YouTube player for that item. Actually in some way, my work can look like this:

  function show video (Item number Flight) {document.getElementById ('theVideo'). InnerHTML = "& lt; iframe width = '420' height = '345' src = http: //www.youtube.com/embed/" + responseObject.items [Itemclassed] .id.videoId + "/ & gt; Lt; / iframe & gt; "}  

I am studying for a few hours, but I can not feel stumbling in a clean way to do this. any idea? I would like to leave Javascript for this, to keep things simple for me now.

> & Lt; A & gt;

  var reaction object = {}; ResponseObject.items = [{Snippet: {Thumbnail: {High: {url: 'http: //lorempixel.com/50/5'}}}, ID: {videoId: `A1213131`}}, {Snippet: {Thumbnail : {High: {url: 'http: //lorempixel.com/50/5'}}}, id: {video id: `b 1213131`}}, {snippet: {thumbnail: {high: {url: ' Http: //lorempixel.com/50/5 '}}}, id: {videoId: `C1213131`}}]; For (var i = 0; i & lt; responseObject.items.length; i ++) {// Create anchor var a = document.createElement ('a'); // Set the property of your href a.href = '#'; // add thumbnail to a.innerHTML = "& lt; img src =" + responseObject.items [i] .snippet.thumbnails.high.url + i + "/>"; // Click the event a.addEventListener ('click', function (e) {// stop it to work as an anchor; e.preventDefault (); // if if in the iframe #thevideo // Iframe has already been set, it may be better to change its SRC property document only .. Searchable Selector (VVDO & gt; IFam) .src = ... document.getElementById ('theVideo'). InnerHTML = "& Lt; iframe width = '420' height = '345' src = http: //www.youtube.com/embed/" + responseObject.items [this] .id.videoId + "/> gt; & lt; / Iframe & gt; "+ // Only snippet examples "& Lt; p & gt; http: //www.youtube.com/embed/" + responseObject.items [this] .id.videoId + "& lt; / p>";} .bind ( I)); //.bind(i) Removed our `i` var will make it correspond to the 'var' of the event. // newly created & lt; A & gt; #response Devel Document.getElementById (for 'feedback') AppendChild (a); }  

  & lt; Div id = "response" & gt; & Lt; / Div & gt; & Lt; Div id = "thevideo" & gt; & Lt; / Div & gt;