Not logged in : Login

About: http://ods-qa.openlinksw.com:8896/proxy-iri/51c0ca3b0d00d753911c01ce981a77ef6e161166     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
publisher
described by
container of
mainEntityOfPage
author
position
  • #17
  • #18
dateModified
articleBody
  • I’m a little confused on how event objects work. In my for loop the following code works: for (i = 1; i <= 5; i++) { var newImage = document.createElement('img'); newImage.setAttribute('src', "images\/pic" + i + ".jpg"); thumbBar.appendChild(newImage); function displayThumb(clickedImage) { var imageThumb = clickedImage.target.getAttribute('src'); displayedImage.setAttribute('src', imageThumb); }; newImage.addEventListener('click', displayThumb); } While the following does not work: for (i = 1; i <= 5; i++) { var newImage = document.createElement('img'); newImage.setAttribute('src', "images\/pic" + i + ".jpg"); thumbBar.appendChild(newImage); function displayThumb(clickedImage) { var imageThumb = newImage.getAttribute('src'); displayedImage.setAttribute('src', imageThumb); }; newImage.addEventListener('click', displayThumb); } In other words, what is the event object in the displayThumb function doing in the first example that allows it to be functioning on the entire loop, whereas in the second example the loop is completed, and the click events only function on the last thumbnail.
  • AvidLearner: Here, my function sourceAlter only has the parameter e and therefore, I did not pass any parameters when I called the function, hence image[i].addEventListener('click', sourceAlter) without any parentheses and parameters. However, what if my function requires two parameters, e.g. sourceAlter(a, b) , how do I pass on the parameters to said function? I don’t quite understand how looping works in JavaScript. It somehow does not make sense to me how for (...) in my code above worked. I do know that it loops five times (as expressed in the conditional statement i < image.length ) and that whenever an image with the order i is clicked, we run a function. But, when we click picture 1, 2,3 and then 1 again, it somehow worked? There is not decrement in the for loop, so how did it happen? Is the loop run over again after each action (in this case, click (but doesn’t have to be necessarily a click))? So to answer the first question, this isn’t the simplest, but it is possible. This stack overflow answer is useful, and contains multiple ways of doing it: https://stackoverflow.com/questions/256754/how-to-pass-arguments-to-addeventlistener-listener-function For the second question, the loop only runs once. But one of the main things the loop does is to add an onclick handler to each image, using this code: newImage.onclick = function(e) { var imgSrc = e.target.getAttribute('src'); displayImage(imgSrc); } because that handler is added to each image, it is run every time an image is clicked.
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