@prefix rdf: . @prefix ns1: . ns1:d423b8d88b7353fce8509904dbb5f63537f6c7bb rdf:type rdf:Statement . @prefix rdfs: . ns1:d423b8d88b7353fce8509904dbb5f63537f6c7bb rdfs:label "Embedded HTML5 Microdata Statement 142" . @prefix pwdr: . ns1:d423b8d88b7353fce8509904dbb5f63537f6c7bb pwdr:describedby , ; rdf:object "\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:\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 following,\nplease grade me :\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}" . @prefix schema: . ns1:d423b8d88b7353fce8509904dbb5f63537f6c7bb rdf:predicate schema:articleBody ; rdf:subject . rdf:type schema:DiscussionForumPosting ; schema:datePublished <2018-06-04T05:43:53Z> , "2018-07-20T05:41:32Z" ; schema:publisher ns1:a439a40f76abb0743be66578b73891a13f811734 ; pwdr:describedby , ; schema:mainEntityOfPage ; schema:author , ns1:de2fd9f9d0620935f106dcf8188108d5b1a9d825 ; schema:position "#13" , "#14" ; schema:dateModified <2018-07-20T06:16:44Z> ; schema:articleBody "\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:\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 following,\nplease grade me :\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}" , "\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 Mattia,\nYour code doesn\u2019t look too at at all \u2014 nice job!\nOne bit of feedback I can give you \u2014 in the following\nblock:\nfunction getTheImage(e, src) {\nvar src = e.target.getAttribute('src');\ndisplayedImage.setAttribute('src', src);\n}\n}\n\nYou don\u2019t need to define the src parameter in the\nfunction, as you are getting src inside the function\nbody in the second line instead. So the following would work\nfine:\nfunction getTheImage(e) {\nvar src = e.target.getAttribute('src');\ndisplayedImage.setAttribute('src', src);\n}\n}\n" ; schema:headline "\"Image gallery\" assessment" . @prefix ns5: . ns5:interactionStatistic , . ns1:b03b177780962d39a3dd60609bf0b9d8424d74da rdf:type rdf:Statement ; rdfs:label "Embedded HTML5 Microdata Statement 106" ; pwdr:describedby , ; rdf:object "\nHi Mattia,\nYour code doesn\u2019t look too at at all \u2014 nice job!\nOne bit of feedback I can give you \u2014 in the following\nblock:\nfunction getTheImage(e, src) {\nvar src = e.target.getAttribute('src');\ndisplayedImage.setAttribute('src', src);\n}\n}\n\nYou don\u2019t need to define the src parameter in the\nfunction, as you are getting src inside the function\nbody in the second line instead. So the following would work\nfine:\nfunction getTheImage(e) {\nvar src = e.target.getAttribute('src');\ndisplayedImage.setAttribute('src', src);\n}\n}\n" ; rdf:predicate schema:articleBody ; rdf:subject . ns1:fb514f64994d738e6b90c9f856f4d46b5d4d82f1 rdf:type rdf:Statement ; rdfs:label "Embedded HTML5 Microdata Statement 107" ; pwdr:describedby , ; rdf:object ; rdf:predicate schema:author ; rdf:subject . ns1:a83d53daf2db556a24a957646e78c85bcf0ce9d4 rdf:type rdf:Statement ; rdfs:label "Embedded HTML5 Microdata Statement 108" ; pwdr:describedby , ; rdf:object <2018-06-04T05:43:53Z> ; rdf:predicate schema:datePublished ; rdf:subject . ns1:a0d4358da5f2717b661394f642404c73edd51de6 rdf:type rdf:Statement ; rdfs:label "Embedded HTML5 Microdata Statement 146" , "Embedded HTML5 Microdata Statement 109" , "Embedded HTML5 Microdata Statement 147" ; pwdr:describedby , ; rdf:object "\"Image gallery\" assessment" ; rdf:predicate schema:headline ; rdf:subject . rdf:type rdf:Statement ; rdfs:label "Embedded HTML5 Microdata Statement 110" ; pwdr:describedby , ; rdf:object "#13" ; rdf:predicate schema:position ; rdf:subject . rdf:type rdf:Statement ; rdfs:label "Embedded HTML5 Microdata Statement 151" , "Embedded HTML5 Microdata Statement 150" , "Embedded HTML5 Microdata Statement 111" ; pwdr:describedby , ; rdf:object schema:DiscussionForumPosting ; rdf:predicate rdf:type ; rdf:subject . rdf:type rdf:Statement ; rdfs:label "Embedded HTML5 Microdata Statement 112" , "Embedded HTML5 Microdata Statement 151" , "Embedded HTML5 Microdata Statement 152" ; pwdr:describedby , ; rdf:object ; rdf:predicate ns5:interactionStatistic ; rdf:subject . ns1:d1736564797379374bd6dc6b88cbfce0956a60d0 rdf:type rdf:Statement ; rdfs:label "Embedded HTML5 Microdata Statement 153" , "Embedded HTML5 Microdata Statement 152" , "Embedded HTML5 Microdata Statement 113" ; pwdr:describedby , ; rdf:object ; rdf:predicate ns5:interactionStatistic ; rdf:subject . ns1:b9a2360e97c1eaf04716888a38a7cf1295544468 rdf:type rdf:Statement ; rdfs:label "Embedded HTML5 Microdata Statement 143" ; pwdr:describedby , ; rdf:object "\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}" ; rdf:predicate schema:articleBody ; rdf:subject . ns1:e4d9725117865bca285ca124479874f361cde517 rdf:type rdf:Statement ; rdfs:label "Embedded HTML5 Microdata Statement 143" , "Embedded HTML5 Microdata Statement 144" ; pwdr:describedby , ; rdf:object ns1:de2fd9f9d0620935f106dcf8188108d5b1a9d825 ; rdf:predicate schema:author ; rdf:subject . rdf:type rdf:Statement ; rdfs:label "Embedded HTML5 Microdata Statement 144" , "Embedded HTML5 Microdata Statement 145" ; pwdr:describedby , ; rdf:object <2018-07-20T06:16:44Z> ; rdf:predicate schema:dateModified ; rdf:subject . rdf:type rdf:Statement ; rdfs:label "Embedded HTML5 Microdata Statement 146" , "Embedded HTML5 Microdata Statement 145" ; pwdr:describedby , ; rdf:object "2018-07-20T05:41:32Z" ; rdf:predicate schema:datePublished ; rdf:subject . rdf:type rdf:Statement ; rdfs:label "Embedded HTML5 Microdata Statement 148" , "Embedded HTML5 Microdata Statement 147" ; pwdr:describedby , ; rdf:object ; rdf:predicate schema:mainEntityOfPage ; rdf:subject . rdf:type rdf:Statement ; rdfs:label "Embedded HTML5 Microdata Statement 148" , "Embedded HTML5 Microdata Statement 149" ; pwdr:describedby , ; rdf:object "#14" ; rdf:predicate schema:position ; rdf:subject . ns1:ba60214ef5b98ce1d095cc0cfe5758bf70903eb5 rdf:type rdf:Statement ; rdfs:label "Embedded HTML5 Microdata Statement 149" , "Embedded HTML5 Microdata Statement 150" ; pwdr:describedby , ; rdf:object ns1:a439a40f76abb0743be66578b73891a13f811734 ; rdf:predicate schema:publisher ; rdf:subject .