Not logged in : Login

About:     Goto   Sponge   NotDistinct   Permalink

An Entity of Type : schema:DiscussionForumPosting, within Data Space : associated with source document(s)

described by
container of
  • #19
  • #20
  • impresently: a little confused I know how you feel, I’m not new to JavaScript and I don’t understand it well enough to easily explain it, but it has to do with “closures” and “lexical scope” I think the “Creating closures in loops: A common mistake” section near the end of this page does the best job at explaining that I’ve seen. MDN Web Docs Closures A closure is the combination of a function and the lexical environment within which that function was declared.
  • 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, 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, 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, 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.
  • "Image gallery" assessment
is topic of
is container of of
is object of
is subject of
Faceted Search & Find service v1.17_git55 as of Mar 01 2021

Alternative Linked Data Documents: ODE     Content Formats:       RDF       ODATA       Microdata      About   
This material is Open Knowledge   W3C Semantic Web Technology [RDF Data] Valid XHTML + RDFa
OpenLink Virtuoso version 08.03.3320 as of Jan 15 2021, on Linux (x86_64-generic-linux-glibc25), Single-Server Edition (7 GB total memory)
Data on this page belongs to its respective rights holders.
Virtuoso Faceted Browser Copyright © 2009-2021 OpenLink Software