Hello, I want to ask something that has been bugging me for the last few days. It’s about this assessment in MDN learning course.
What catch my attention is the first point at “Adding an onclick handler to each thumbnail image” section. It says that using newImage
won’t work because that the loop is completed before the event handlers are applied.
I also need to mention that I already finished this assessment as instructed, but I just can’t help but feel baffled at why the following code did not work.
var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');
var btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');
/* Looping through images */
for (var i = 1; i <= 5; ++i) {
console.log(i + ' loop');
var imagePath = 'images/pic';
var newImage = document.createElement('img');
newImage.onclick = function(e) {
displayedImage.setAttribute('src', newImage.getAttribute('src'));
};
newImage.setAttribute('src', imagePath + i + '.jpg');
thumbBar.appendChild(newImage);
console.log(thumbBar);
}
/* Wiring up the Darken/Lighten button */
The code above would result like the following seen on Developer Console.
I wonder why is this happening.
-
Why is the
console.log(thumbBar)
in the first loop already contains 5 image elements when the code is still at first loop? With the above code, I would expect the following to happen.1 loop
<div class="thumb-bar">
<img src="images/pic1.jpg">
</div>
2 loop
<div class="thumb-bar">
<img src="images/pic1.jpg">
<img src="images/pic2.jpg">
</div>
3 loop
<div class="thumb-bar">
<img src="images/pic1.jpg">
<img src="images/pic2.jpg">
<img src="images/pic3.jpg">
</div>
4 loop
<div class="thumb-bar">
<img src="images/pic1.jpg">
<img src="images/pic2.jpg">
<img src="images/pic3.jpg">
<img src="images/pic4.jpg">
</div>
5 loop
<div class="thumb-bar">
<img src="images/pic1.jpg">
<img src="images/pic2.jpg">
<img src="images/pic3.jpg">
<img src="images/pic4.jpg">
<img src="images/pic5.jpg">
</div>
-
Why is the
onclick
handler return the fifth image using the above code? The explanation in the assessment page is not enough to clear this up. -
I have read the reference page for
appendChild()
method andcreateElement()
. There’s something aboutappendChild()
method where you can’t have 2 same elements simultaneously on the page. The existing element would be removed and placed at the new position. If this is the case, then why is the first image displayed at the HTML page (the one withclass="displayed-img"
) not be removed and placed atthumb-bar <div>
during the first iteration of the loop where it’s basically append<img src="images/pic1.jpg">
to the thumb-bar while the existing<img src="images/pic1.jpg">
already in place?
This is frustrating and disappointed at myself because I can’t explain this myself without asking others considering that this is a very simple example involving only loop and using built-in function. I’m hoping that someone here can provide a clear explanation.