articleBody
| -
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.
-
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.
|