Not logged in : Login

About: http://ods-qa.openlinksw.com:8896/proxy-iri/c749ee0e48cd03b22c4ca117608e5e5ac721fd31     Goto   Sponge   NotDistinct   Permalink

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

AttributesValues
type
datePublished
  • 2018-07-20T05:41:32Z
described by
author
position
  • #14
dateModified
articleBody
  • 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)'; } }
headline
  • "Image gallery" assessment
interactionStatistic
is topic of
is container of of
is object of
is subject of
Faceted Search & Find service v1.17_git38 as of Aug 05 2019


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.01.3307 as of May 21 2018, on Linux (x86_64-redhat-linux-gnu-ANALYTICS), Single-Server Edition (7 GB total memory)
Data on this page belongs to its respective rights holders.
Virtuoso Faceted Browser Copyright © 2009-2020 OpenLink Software