Not logged in : Login

About: http://ods-qa.openlinksw.com:8896/proxy-iri/74aab2182251d31039800b87befe88dce6d81a17     Goto   Sponge   NotDistinct   Permalink

An Entity of Type : schema:DiscussionForumPosting, within Data Space : ods-qa.openlinksw.com:8896 associated with source document(s)

AttributesValues
type
datePublished
described by
container of
author
position
  • #20
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.
headline
  • "Image gallery" assessment
interactionStatistic
is topic of
is container of of
is object of
is subject of
Faceted Search & Find service v1.17_git38 as of Aug 05 2019


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.01.3307 as of May 21 2018, on Linux (x86_64-redhat-linux-gnu-ANALYTICS), Single-Server Edition (7 GB total memory)
Data on this page belongs to its respective rights holders.
Virtuoso Faceted Browser Copyright © 2009-2020 OpenLink Software