Selecting element using JS

Question

var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');

btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');

/* Looping through images */
for(var i=1;i<=5;i++){
  var newImage = document.createElement('img');
  newImage.setAttribute('src', "images/pic"+i+".jpg");
  thumbBar.appendChild(newImage);
}

function getPath(){
    var path = this.document.getAttribute('src').value;
}
newImage.onclick=function(){

    var path = newImage.getAttribute('src');
    console.log(path);
    displayedImage.setAttribute('src', path);
}

i tried printing out the path when i click on the image, but it only return the last value of newImage..but i have 4 pictures that can be selected

score 0 · Answer 1 · edited May 23 '17 at 12:32

0

You'll have to set the event listener inside the loop for each new element. Like this:

var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');

btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');

/* Looping through images */
for(var i=1;i<=5;i++){
    var newImage = document.createElement('img');
    newImage.setAttribute('src', "images/pic"+i+".jpg");
    thumbBar.appendChild(newImage);

    // **************************************************
    newImage.onclick=function(){
        var path = this.getAttribute('src'); // instead of newImage use this
        console.log(path);
        displayedImage.setAttribute('src', path);
    }
    // **************************************************
}

function getPath(){
    var path = this.document.getAttribute('src').value;
}

Note: If you are planing on using i inside the the function assigned to the onclick then consider taking a look at this.

edited May 23 '17 at 12:32

Community

1
1

answered Mar 13 '17 at 03:13

ibrahim mahrir

31,174
5
48
73

@newB I still don't understand what you mean by retrieve the last value! – ibrahim mahrir Mar 13 '17 at 03:26
@newB If you want an explanation why it didn't work, then take a look at the link at the end of the answer or google **closure inside loops** there is plenty of explanation about it on SO. – ibrahim mahrir Mar 13 '17 at 03:34
thank ! but if it were to translate to english .. this.getAttribute is same as newImage.getAttribute right.. – newB Mar 13 '17 at 03:40
@newB `this` inside an event listener is the element that triggered the event, in this case it's the image that is clicked. We can't use `newImage` because all the event listeners will have a reference to the same `newImage` which is the last one (the loop messes up the closure because it have the same scope throughout the whole iterations => check the link or google what I told you to learn why)! – ibrahim mahrir Mar 13 '17 at 03:44

score 0 · Answer 2 · answered Mar 13 '17 at 03:15

0

Why don't you append a CSS class to each of the image elements and use the class name as the CSS selector? Like so,

newImage.className = 'my-class-name';

answered Mar 13 '17 at 03:15

Latin Warrior

902
11
14

Selecting element using JS

2 Answers2