| articleBody
| -
And this is my JS code and live preview . Only points to highlight
in my code comparing to the solved one by chris are:
I used addEventListener instead of using the event
handler as property. Being able to remove the listeners was what
made me decide for it (even if it didn’t matter at this early
stage ).
Because of the previous point, I didn’t code the
displayImage function specified in the guidelines. It
was going to be only one line in there, and I was already using
event function handlers. Too many functions for something that
simple. But, I was able to see that setting up
displayImage allow us to used it in a wide different
set of events in case we want to improve our gallery; i.e. dragging
a file to the page, display such picture and show another thumbnail
at the bottom.
I loved this assessment! it was challenging. I’m going to read
again the “Introduction to events” section as well as the
external links in there. I felt like it was a stepped curve of
learning.
-
Hello!
my code is the following:
for( i=1; i<=5; i++) {
var newImage = document.createElement(‘img’);
newImage.setAttribute(‘src’, ‘images/pic’ + i +
‘.jpg’);
function whatever(e) {
displayedImage.setAttribute(‘src’,
e.target.getAttribute(‘src’));
}
newImage.addEventListener(‘click’, whatever);
thumbBar.appendChild(newImage);
}
It seems to be working. My questions are the following:
is there a preference for having the function ‘whatever’
inside the for loop or outside the for loop? mine is within the
loop, but the solution code places it outside. Just want to know if
there are any cases, and if so, what they are, in which one would
be preferable.
does the placement for the line
‘thumbBar.appendChild(newImage);’ matter, or can it be placed
anywhere inside the for loop?
I see that in the solution code, the function
displayImage(imgSrc) is called before the function is defined, but
I was under the impression that the code would crash if a function
is called before it’s defined. can you please clarify the order
of function calling and definition?
And finally, just want to say that i found this assessment to be
challenging and fun!
-
Hello!
my code is the following:
for( i=1; i<=5; i++) {
var newImage = document.createElement(‘img’);
newImage.setAttribute(‘src’, ‘images/pic’ + i + ‘.jpg’);
function whatever(e) {
displayedImage.setAttribute(‘src’,
e.target.getAttribute(‘src’));
}
newImage.addEventListener(‘click’, whatever);
thumbBar.appendChild(newImage);
}
It seems to be working. My questions are the following:
is there a preference for having the function ‘whatever’ inside
the for loop or outside the for loop? mine is within the loop, but
the solution code places it outside. Just want to know if there are
any cases, and if so, what they are, in which one would be
preferable.
does the placement for the line
‘thumbBar.appendChild(newImage);’ matter, or can it be placed
anywhere inside the for loop?
I see that in the solution code, the function
displayImage(imgSrc) is called before the function is defined, but
I was under the impression that the code would crash if a function
is called before it’s defined. can you please clarify the order of
function calling and definition?
And finally, just want to say that i found this assessment to be
challenging and fun!
|
![[RDF Data]](/fct/images/sw-rdf-blue.png)
