| 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
-
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
|
![[RDF Data]](/fct/images/sw-rdf-blue.png)
