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
-
Hi guys,
this is my code and it’s currently working. What do you
think?
/* Looping through images */
for (i = 1; i <= 5; i++) {
var newImage = document.createElement(‘img’);
newImage.setAttribute(‘src’, ‘./images/pic’ + i +
‘.jpg’);
thumbBar.appendChild(newImage);
newImage.onclick = getTheImage;
function getTheImage(e, src) {
var src = e.target.getAttribute(‘src’);
displayedImage.setAttribute(‘src’, src);
};
};
/* Wiring up the Darken/Lighten button */
btn.onclick = changeOverlay;
function changeOverlay () {
var cl = btn.getAttribute(‘class’);
if (cl === ‘dark’) {
btn.setAttribute(‘class’, ‘light’);
btn.textContent = ‘Lighten’;
overlay.style.backgroundColor = ‘rgba(0,0,0,0.5)’;
}
else {
btn.setAttribute(‘class’, ‘dark’);
btn.textContent = ‘Darken’;
overlay.style.backgroundColor = ‘rgba(0,0,0,0)’;
}
};
-
Hi guys,
this is my code and it’s currently working. What do you
think?
/* Looping through images */
for (i = 1; i <= 5; i++) {
var newImage = document.createElement(‘img’);
newImage.setAttribute(‘src’, ‘./images/pic’ + i + ‘.jpg’);
thumbBar.appendChild(newImage);
newImage.onclick = getTheImage;
function getTheImage(e, src) {
var src = e.target.getAttribute(‘src’);
displayedImage.setAttribute(‘src’, src);
};
};
/* Wiring up the Darken/Lighten button */
btn.onclick = changeOverlay;
function changeOverlay () {
var cl = btn.getAttribute(‘class’);
if (cl === ‘dark’) {
btn.setAttribute(‘class’, ‘light’);
btn.textContent = ‘Lighten’;
overlay.style.backgroundColor = ‘rgba(0,0,0,0.5)’;
}
else {
btn.setAttribute(‘class’, ‘dark’);
btn.textContent = ‘Darken’;
overlay.style.backgroundColor = ‘rgba(0,0,0,0)’;
}
};
|