Not logged in : Login

About: Embedded HTML5 Microdata Statement 143     Goto   Sponge   NotDistinct   Permalink

An Entity of Type : rdf:Statement, within Data Space : ods-qa.openlinksw.com:8896 associated with source document(s)

AttributesValues
type
label
  • Embedded HTML5 Microdata Statement 143
described by
object
  • Problem Hello, I have a problem here. I don’t understand what didn’t work in my function that tries to change the source of displayedImage. My code: var displayedImage = document.querySelector('.displayed-img'); var thumbBar = document.querySelector('.thumb-bar'); btn = document.querySelector('button'); var overlay = document.querySelector('.overlay'); for (var i = 0; i < 5; i++) { var newImage = document.createElement('img'); var path = 'images/pic' + (i + 1).toString() + '.jpg'; newImage.setAttribute('src', path); thumbBar.appendChild(newImage); } var image = document.getElementsByTagName('img'); function sourceAlter(e) { var source = e.target.getAttribute('src'); displayedImage.setAttribute('src', source); } image.onclick = sourceAlter; Furthermore, when I tried to change image.onclick = sourceAlter; to image.addEventListener('click', sourceAlter), the console says that image.addEventListener is not a function. Why is that so? EDIT: I’ve found out the problem to my code. Apparently, getElementsByTagName returns and array and therefore, I have to access the array items one by one. This also caused problems when I tried to pass image directly to addEventListener. I’ve fixed my code to the following, please grade me : var displayedImage = document.querySelector('.displayed-img'); var thumbBar = document.querySelector('.thumb-bar'); btn = document.querySelector('button'); var overlay = document.querySelector('.overlay'); for (var i = 0; i < 5; i++) { var newImage = document.createElement('img'); var path = 'images/pic' + (i + 1).toString() + '.jpg'; newImage.setAttribute('src', path); thumbBar.appendChild(newImage); } var image = document.getElementsByTagName('img'); function sourceAlter(e) { var source = e.target.getAttribute('src'); displayedImage.setAttribute('src', source); } for (var i = 0; i < image.length; i++) { image[i].addEventListener('click', sourceAlter); } /* Wiring up the Darken/Lighten button */ btn.onclick = function() { if (btn.getAttribute('class') === '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)'; } }
predicate
subject
is topic of
is container of of
Faceted Search & Find service v1.17_git55 as of Mar 01 2021


Alternative Linked Data Documents: ODE     Content Formats:       RDF       ODATA       Microdata      About   
This material is Open Knowledge   W3C Semantic Web Technology [RDF Data] Valid XHTML + RDFa
OpenLink Virtuoso version 08.03.3320 as of Jan 15 2021, on Linux (x86_64-generic-linux-glibc25), Single-Server Edition (7 GB total memory)
Data on this page belongs to its respective rights holders.
Virtuoso Faceted Browser Copyright © 2009-2021 OpenLink Software