| 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 Mattia,
Your code doesn’t look too at at all — nice job!
One bit of feedback I can give you — in the following
block:
function getTheImage(e, src) {
var src = e.target.getAttribute('src');
displayedImage.setAttribute('src', src);
}
}
You don’t need to define the src parameter in the
function, as you are getting src inside the function
body in the second line instead. So the following would work
fine:
function getTheImage(e) {
var src = e.target.getAttribute('src');
displayedImage.setAttribute('src', src);
}
}
-
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)
