This HTML5 document contains 90 embedded RDF statements represented using HTML+Microdata notation.

The embedded RDF content will be recognized by any processor of HTML5 Microdata.

PrefixNamespace IRI
n5http://ods-qa.openlinksw.com:8896/about/id/entity/https/discourse.mozilla.org/t/image-gallery-assessment/
n11https://discourse.mozilla.org/t/image-gallery-assessment/
pwdrhttp://www.w3.org/2007/05/powder-s#
schemahttp://schema.org/
rdfshttp://www.w3.org/2000/01/rdf-schema#
rdfhttp://www.w3.org/1999/02/22-rdf-syntax-ns#
n2http://ods-qa.openlinksw.com:8896/proxy-iri/
n92018-07-26T09:54:
n7http://ods-qa.openlinksw.com:8896/about/id/https/discourse.mozilla.org/t/image-gallery-assessment/
xsdhhttp://www.w3.org/2001/XMLSchema#
siochttp://rdfs.org/sioc/ns#
n8https://discourse.mozilla.org/t/image-gallery-assessment/24687#
Subject Item
n2:74aab2182251d31039800b87befe88dce6d81a17
rdf:type
schema:SiteNavigationElement schema:DiscussionForumPosting
schema:datePublished
n9:32Z
pwdr:describedby
n5:24687 n7:24687
sioc:container_of
n2:dabef28c15cabc10013b50c38615f40572779621
sioc:link
n11:24687
schema:author
n2:2339c2bbfb9e73cc5e66c8fa933fd13c9d8c4edc
schema:position
#20
schema:articleBody
Hi there @impresently! This is a tricky aspect of JavaScript, and I don’t blame you for having trouble with it. Let’s try to clear things up. When a function is run as a direct result of an event firing, due to an event listener being added to the object on which the event fires, the function implicitly has an event object available inside its lexical scope (i.e. inside the function, but not outside it). The reason we write e, or event, or in this case clickedImage as a parameter is to give a definition to this event object — i.e. a name we can refer to it as. So in this case, each time the loop is run, the displayThumb() function is defined, and we add an event listener to the newImage created on each round of the loop that makes it so that displayThumb() is run when the image in question is clicked on. By the way, it would arguably be more efficient and better practice to define the function only once, outside the loop, rather than each time it runs (see our version at https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/main.js), but yours still works OK. So the event object passed into the function each time an image is clicked (clickedImage in your case) varies depending on which image was clicked. It contains information relevant to the image that was clicked. Its target attribute contains a reference to the image itself — “the target of the event”. This is why when you do clickedImage.target, you can directly access the properties available on image. We can therefore use getAttribute('src') to access the contents of the image’s src attribute (the path to the image), etc. Now, we also need to talk about the order in which things are run around loops. When you run a loop and it has a function inside it, the different loop iterations all run first, then the functions inside the loop iterations will run afterwards. This is why the second code example DOESN’T work properly. By the time the loop iterations have all run, newImage's src value is equal to the path to the last image. The event listeners are all set up correctly, but the function will always set the main image displayed to that last image. If you instead get the src from e.target.getAttribute(), the value will be relative to the image clicked on, not the value of newImage after the loops have all run, which is always equal to the last image. Does that help? Happy to discuss some more if you are still not clear.
schema:headline
"Image gallery" assessment
n8:interactionStatistic
n2:49353a77632fd9e52aecc215b5837e5d39453b50 n2:8f522bccbcfce596fbee8b2897bd0465f1742e5a
Subject Item
n2:cba632a5e90d80b274dfe53170521310bbbb80d4
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 125
pwdr:describedby
n5:24687 n7:24687
rdf:object
n2:dabef28c15cabc10013b50c38615f40572779621
rdf:predicate
sioc:container_of
rdf:subject
n2:74aab2182251d31039800b87befe88dce6d81a17
Subject Item
n2:96397e12b9c3bb67cd56b0fdaf11b49af91b4d5b
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 126
pwdr:describedby
n5:24687 n7:24687
rdf:object
Hi there @impresently! This is a tricky aspect of JavaScript, and I don’t blame you for having trouble with it. Let’s try to clear things up. When a function is run as a direct result of an event firing, due to an event listener being added to the object on which the event fires, the function implicitly has an event object available inside its lexical scope (i.e. inside the function, but not outside it). The reason we write e, or event, or in this case clickedImage as a parameter is to give a definition to this event object — i.e. a name we can refer to it as. So in this case, each time the loop is run, the displayThumb() function is defined, and we add an event listener to the newImage created on each round of the loop that makes it so that displayThumb() is run when the image in question is clicked on. By the way, it would arguably be more efficient and better practice to define the function only once, outside the loop, rather than each time it runs (see our version at https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/main.js), but yours still works OK. So the event object passed into the function each time an image is clicked (clickedImage in your case) varies depending on which image was clicked. It contains information relevant to the image that was clicked. Its target attribute contains a reference to the image itself — “the target of the event”. This is why when you do clickedImage.target, you can directly access the properties available on image. We can therefore use getAttribute('src') to access the contents of the image’s src attribute (the path to the image), etc. Now, we also need to talk about the order in which things are run around loops. When you run a loop and it has a function inside it, the different loop iterations all run first, then the functions inside the loop iterations will run afterwards. This is why the second code example DOESN’T work properly. By the time the loop iterations have all run, newImage's src value is equal to the path to the last image. The event listeners are all set up correctly, but the function will always set the main image displayed to that last image. If you instead get the src from e.target.getAttribute(), the value will be relative to the image clicked on, not the value of newImage after the loops have all run, which is always equal to the last image. Does that help? Happy to discuss some more if you are still not clear.
rdf:predicate
schema:articleBody
rdf:subject
n2:74aab2182251d31039800b87befe88dce6d81a17
Subject Item
n2:9741c1e3c83f1fc83c247b0223b29d54610970d9
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 127
pwdr:describedby
n5:24687 n7:24687
rdf:object
n2:2339c2bbfb9e73cc5e66c8fa933fd13c9d8c4edc
rdf:predicate
schema:author
rdf:subject
n2:74aab2182251d31039800b87befe88dce6d81a17
Subject Item
n2:5242a431f4db7af3cd7aa49b6af25d2748a239f0
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 128
pwdr:describedby
n5:24687 n7:24687
rdf:object
n9:32Z
rdf:predicate
schema:datePublished
rdf:subject
n2:74aab2182251d31039800b87befe88dce6d81a17
Subject Item
n2:ae5067ee149ea8d38a8e89bd97cd787e4afe2a26
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 129
pwdr:describedby
n5:24687 n7:24687
rdf:object
"Image gallery" assessment
rdf:predicate
schema:headline
rdf:subject
n2:74aab2182251d31039800b87befe88dce6d81a17
Subject Item
n2:850e4cbb36575972534bfdb9fd6b3b395e6da96c
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 130
pwdr:describedby
n5:24687 n7:24687
rdf:object
#20
rdf:predicate
schema:position
rdf:subject
n2:74aab2182251d31039800b87befe88dce6d81a17
Subject Item
n2:fc390a832c691585af9db2410c4c7bd245970431
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 131
pwdr:describedby
n5:24687 n7:24687
rdf:object
schema:DiscussionForumPosting
rdf:predicate
rdf:type
rdf:subject
n2:74aab2182251d31039800b87befe88dce6d81a17
Subject Item
n2:29e12570e7135ee345265bac398f5382990890c4
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 132
pwdr:describedby
n5:24687 n7:24687
rdf:object
n2:49353a77632fd9e52aecc215b5837e5d39453b50
rdf:predicate
n8:interactionStatistic
rdf:subject
n2:74aab2182251d31039800b87befe88dce6d81a17
Subject Item
n2:dc26811ce16c433752750e31c4a61886867c4692
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 133
pwdr:describedby
n5:24687 n7:24687
rdf:object
n2:8f522bccbcfce596fbee8b2897bd0465f1742e5a
rdf:predicate
n8:interactionStatistic
rdf:subject
n2:74aab2182251d31039800b87befe88dce6d81a17
Subject Item
n2:948bd4ce5e05856552e37dd60ab19e267a5c033b
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 169
pwdr:describedby
n5:24687 n7:24687
rdf:object
n11:24687
rdf:predicate
sioc:link
rdf:subject
n2:74aab2182251d31039800b87befe88dce6d81a17
Subject Item
n2:e5462223a189272b40610f4bdced58cd228d5276
rdf:type
rdf:Statement
rdfs:label
Embedded HTML5 Microdata Statement 170
pwdr:describedby
n5:24687 n7:24687
rdf:object
schema:SiteNavigationElement
rdf:predicate
rdf:type
rdf:subject
n2:74aab2182251d31039800b87befe88dce6d81a17