Image Gallery Assessment

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.

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

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

  3. I have read the reference page for appendChild() method and createElement(). There’s something about appendChild() 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 with class="displayed-img") not be removed and placed at thumb-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.

Hello,

Actually it’s working like how you are expecting it to. Instead of console.log(thumbBar) on the last line, do this - console.log(thumbBar.innerHTML). Then you can see the content adding up gradually.

When you did console.log(thumbBar) and later expands that result to view, the browser console evaluates the contents of thumbBar at that time, when the loop has already finished and all the children are already appended.