| articleBody
| -
Hi there Patty,
Thanks for sharing your solution. I had a bit of a play, and
ended up with this:
/* Looping through images */
function displayImage(e) {
displayedImage.setAttribute('src', e.target.getAttribute('src'));
}
for(var i = 1; i <= 5; i++) {
var newImage = document.createElement('img');
newImage.setAttribute('src', 'images/pic' + i + '.jpg');
thumbBar.appendChild(newImage);
newImage.addEventListener('click', displayImage);
}
I think that if anything this is a better solution than our
final example, although obviously I’ve got the function outside
the solution. But you’ve improved on it by adding an event
listener, rather than using an onclick handler function. Again,
removing a function from the loop.
It is generally considered bad practice to include a function
inside a loop, as it can cause problems in some circumstances. It
is better to define the function outside the loop and reference it
from inside.
I am going to update our example when I get the time to use
something more like this. I’ve made a note of it. Thanks again
for jogging me on this!
To answer your questions:
See above.
There is flexibility here, but it does need to be placed after
you have defined newImage, otherwise you’ll get an undefined
error.
the answer here is “it depends” — this stack overflow
post provides useful reading on bthe matter:
https://stackoverflow.com/questions/9973461/does-a-javascript-function-have-to-be-defined-before-calling-it
-
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!
-
Hi there Patty,
Thanks for sharing your solution. I had a bit of a play, and
ended up with this:
/* Looping through images */
function displayImage(e) {
displayedImage.setAttribute('src', e.target.getAttribute('src'));
}
for(var i = 1; i <= 5; i++) {
var newImage = document.createElement('img');
newImage.setAttribute('src', 'images/pic' + i + '.jpg');
thumbBar.appendChild(newImage);
newImage.addEventListener('click', displayImage);
}
I think that if anything this is a better solution than our
final example, although obviously I’ve got the function outside the
solution. But you’ve improved on it by adding an event listener,
rather than using an onclick handler function. Again, removing a
function from the loop.
It is generally considered bad practice to include a function
inside a loop, as it can cause problems in some circumstances. It
is better to define the function outside the loop and reference it
from inside.
I am going to update our example when I get the time to use
something more like this. I’ve made a note of it. Thanks again for
jogging me on this!
To answer your questions:
See above.
There is flexibility here, but it does need to be placed after
you have defined newImage, otherwise you’ll get an undefined
error.
the answer here is “it depends” — this stack overflow post
provides useful reading on bthe matter:
https://stackoverflow.com/questions/9973461/does-a-javascript-function-have-to-be-defined-before-calling-it
|
![[RDF Data]](/fct/images/sw-rdf-blue.png)
