"\n\nProblem\nHello, I have a problem here. I don\u2019t understand what didn\u2019t\nwork in my function that tries to change the source of\ndisplayedImage. My code:\n\nvar displayedImage = document.querySelector('.displayed-img');\nvar thumbBar = document.querySelector('.thumb-bar');\n\nbtn = document.querySelector('button');\nvar overlay = document.querySelector('.overlay');\n\nfor (var i = 0; i < 5; i++) {\n var newImage = document.createElement('img');\n var path = 'images/pic' + (i + 1).toString() + '.jpg';\n newImage.setAttribute('src', path);\n thumbBar.appendChild(newImage);\n}\n\nvar image = document.getElementsByTagName('img');\n\nfunction sourceAlter(e) {\n var source = e.target.getAttribute('src');\n displayedImage.setAttribute('src', source);\n}\n\nimage.onclick = sourceAlter;\n\nFurthermore, when I tried to change image.onclick =\nsourceAlter; to image.addEventListener('click',\nsourceAlter), the console says that\nimage.addEventListener is not a function. Why is that\nso?\n\nEDIT:\nI\u2019ve found out the problem to my code. Apparently,\ngetElementsByTagName returns and array and therefore,\nI have to access the array items one by one. This also caused\nproblems when I tried to pass image directly to\naddEventListener. I\u2019ve fixed my code to the\nfollowing, please grade me :\n\nvar displayedImage = document.querySelector('.displayed-img');\nvar thumbBar = document.querySelector('.thumb-bar');\n\nbtn = document.querySelector('button');\nvar overlay = document.querySelector('.overlay');\n\nfor (var i = 0; i < 5; i++) {\n var newImage = document.createElement('img');\n var path = 'images/pic' + (i + 1).toString() + '.jpg';\n newImage.setAttribute('src', path);\n thumbBar.appendChild(newImage);\n}\n\nvar image = document.getElementsByTagName('img');\n\nfunction sourceAlter(e) {\n var source = e.target.getAttribute('src');\n displayedImage.setAttribute('src', source);\n}\n\nfor (var i = 0; i < image.length; i++) {\n image[i].addEventListener('click', sourceAlter);\n}\n\n/* Wiring up the Darken/Lighten button */\nbtn.onclick = function() {\n if (btn.getAttribute('class') === 'dark') {\n btn.setAttribute('class', 'light');\n btn.textContent = 'Lighten';\n overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';\n }\n\n else {\n btn.setAttribute('class', 'dark');\n btn.textContent = 'Darken';\n overlay.style.backgroundColor = 'rgba(0, 0, 0, 0)';\n }\n}" . . . "\nHi @AvidLearner,\ncongratulations on sorting your problem out! Pretty much all of the\nways of return multiple element references will return an array\nthat you need to loop through (whether it is getElementsByTagName,\ngetElementsByName, or the more modern querySelectorAll).\nI don\u2019t tend to give you an exact grade, as I just don\u2019t\nhave time to mark all the assessment entries in detail. What I can\ndo is test your code (it is a little different to mine, but it\nworks fine, well done), and give you links to the marking guide and\nfinished code so you can check it yourself:\n\nMarking guide: \nhttps://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/marking-guide.md\nLive example: \nhttps://mdn.github.io/learning-area/javascript/building-blocks/gallery/\nSource code: \nhttps://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/main.js\n\n" . . "\nHi @AvidLearner,\ncongratulations on sorting your problem out! Pretty much all of the\nways of return multiple element references will return an array\nthat you need to loop through (whether it is getElementsByTagName,\ngetElementsByName, or the more modern querySelectorAll).\nI don\u2019t tend to give you an exact grade, as I just don\u2019t have\ntime to mark all the assessment entries in detail. What I can do is\ntest your code (it is a little different to mine, but it works\nfine, well done), and give you links to the marking guide and\nfinished code so you can check it yourself:\n\nMarking guide: \nhttps://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/marking-guide.md\nLive example: \nhttps://mdn.github.io/learning-area/javascript/building-blocks/gallery/\nSource code: \nhttps://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/main.js\n\n" . . . . . <2018-07-20T08:54:12Z> . . . "#14" . <2018-07-20T06:16:44Z> . . . . . . . "2018-07-20T05:41:32Z" . . . "2018-07-20T08:54:12Z" . . . . "#15" . . . . . . . . . "\"Image gallery\" assessment" . . . .