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
publisher
described by
mainEntityOfPage
author
position
  • #14
  • #15
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)'; } }
  • Hi @AvidLearner, congratulations on sorting your problem out! Pretty much all of the ways of return multiple element references will return an array that you need to loop through (whether it is getElementsByTagName, getElementsByName, or the more modern querySelectorAll). I don’t tend to give you an exact grade, as I just don’t have time to mark all the assessment entries in detail. What I can do is test your code (it is a little different to mine, but it works fine, well done), and give you links to the marking guide and finished code so you can check it yourself: Marking guide: https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/marking-guide.md Live example: https://mdn.github.io/learning-area/javascript/building-blocks/gallery/ Source code: https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/main.js
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