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

-

essentially, have page 100 image thumbnails being displayed in form:

   document.getelementbyid('response').innerhtml += "<a href='#'><img src=" + responseobject.items[0].snippet.thumbnails.high.url + " /></a>";    document.getelementbyid('response').innerhtml += "<a href='#'><img src=" + responseobject.items[1].snippet.thumbnails.high.url + " /></a>";    document.getelementbyid('response').innerhtml += "<a href='#'><img src=" + responseobject.items[2].snippet.thumbnails.high.url + " /></a>";

and on. if matters, i'm dealing array of objects made of parsed json. anyway, when user clicks on 1 of images, need call function, showvideo, , need know image item (items[1], items[2]) clicked can pass function , display embedded youtube player item. in rough terms, function might like:

function showvideo(itemclicked){    document.getelementbyid('thevideo').innerhtml = "<iframe width='420' height='345' src=http://www.youtube.com/embed/" + responseobject.items[itemclicked].id.videoid + " /></iframe>" }

i've been reading couple hours, can't seem stumble upon clean way this. ideas? i'd stick javascript keep things simple me now.

you may want use for() loop create each of <a>: 

var responseobject={};      responseobject.items=[    	{snippet:{thumbnails:{high:{url:'http://lorempixel.com/50/5'}}}, id:{videoid:`a1213131`}},    	{snippet:{thumbnails:{high:{url:'http://lorempixel.com/50/5'}}}, id:{videoid:`b1213131`}},    	{snippet:{thumbnails:{high:{url:'http://lorempixel.com/50/5'}}}, id:{videoid:`c1213131`}}    	];    (var = 0; < responseobject.items.length; i++) {    //create anchor    var = document.createelement('a');    //set href property    a.href = '#';    //insert thumbnail    a.innerhtml = "<img src=" + responseobject.items[i].snippet.thumbnails.high.url + + " />";    //add click event    a.addeventlistener('click', function(e) {      //prevent act anchor;      e.preventdefault();      //insert iframe #thevideo         //note if iframe setted up, may better change src property document.queryselector(thevideo>iframe).src=...      document.getelementbyid('thevideo').innerhtml = "<iframe width='420' height='345' src=http://www.youtube.com/embed/" + responseobject.items[this].id.videoid + " /></iframe>" +        //only snippet example        "<p>http://www.youtube.com/embed/" + responseobject.items[this].id.videoid + "</p>";    }.bind(i)); //.bind(i) make our `i` var correspond `this` var of fired event.    // append newly created <a> #response div    document.getelementbyid('response').appendchild(a);  }
<div id="response"></div>  <div id="thevideo"></div>


Comments

Post a Comment

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

-
this question has answer here: what's mongoose error cast objectid failed value xxx @ path “_id”? 7 answers even though has been asked many times because entity has no valid objectid field. i came across situation objectid set value can casted objectid still error. the schema: var serviceschema = parammongoose.schema({ servicename:{ type: parammongoose.schema.types.objectid , ref: 'servicenames',required:true } }); pseudo code: servicefromdb=new service({servicename:'some name'}); servicefromdb.servicename='000000000000000000000001'; servicefromdb.save(function(paramerror,paramdata){ if(paramerror){ console.log('but but...',servicefromdb,paramerror) } }); the output of code is: but but... { servicename: 000000000000000000000001, _id: 55079a90286f49280364f78b } { [casterror: cast objectid faile...
Read more

gradle error "Cannot convert the provided notation to a File or URI" -

-
i have defined 2 system properties in gradle.properties: systemprop.builddir=build systemprop.cfgdir=build\\cfg and have following task defined in build.gradle: task clean(group:'clean',description:'clean project') << { ant.sequential { delete(dir: system.properties.builddir) mkdir(dir: system.properties.builddir) delete(dir: system.properties.cfgdir) mkdir(dir: system.properties.cfgdir) } } this generates following error: execution failed task ':clean'. > cannot convert provided notation file or uri: {dir=build}. following types/formats supported: - string or charsequence path, e.g 'src/main/java' or '/usr/include' - string or charsequence uri, e.g 'file:/usr/include' - file instance. - uri or url instance. but equivalent block of code not generate error , works expected: task clean(group:'clean',description:'clean project') << { ...
Read more

python - NameError: name 'subprocess' is not defined -

-
i'm trying make rng website: http://jamesdotcom.com/?p=417 . when run following code: captureimage = subprocess.popen( [ "fswebcam", "-r", "356x292", "-d", "/dev/video0", "static.jpg", "--skip", "10" ], stdout=devnull, stderr=devnull) captureimage.communicate() i following error message: nameerror: name 'subprocess' not defined what should do? thanks have imported first? import subprocess captureimage = subprocess.popen(["fswebcam", ...) subprocess included in python standard library since python 2.4. should not necessary install it.
Read more