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