Javascript get .src from specific image onclick

Question

I'm trying to make an image swapper (click smaller image and it changes the image in a larger area of the screen). But I am getting the variable imgSrc as undefined. I believe this is because I am not getting the source for the specific image being clicked.

        var imgSrc = document.getElementsByClassName('avatar-small').src;
        console.log("img Src  = " + imgSrc);

HTML:

<img class="avatar-small" onclick="selectAvatar()" src="images/avatars/1.png">
<img class="avatar-small" onclick="selectAvatar()" src="images/avatars/2.png">
<img class="avatar-small" onclick="selectAvatar()" src="images/avatars/3.png">

How can I make use of something using .this so I am actually getting the source from the image that is clicked?

The console log outputs:

img Src  = undefined

Solution for anyone looking for a JavaScript image swapper

Script:

function selectAvatar(this){
    var imgSrc = element.src;
    document.getElementById("avatar-big").src = imgSrc;
}

HTML:

<img id="avatar-big" src="images/avatars/10.png />

<img class='avatar-small' onclick='selectAvatar(this)' src='images/avatars/1.png' />
<img class='avatar-small' onclick='selectAvatar(this)' src='images/avatars/2.png' />
<img class='avatar-small' onclick='selectAvatar(this)' src='images/avatars/3.png' />

Felix Kling · Accepted Answer · 2014-03-28 21:27:39Z

2

I think you must pass a reference of the current element this, to your selectAvatar function, like:

<img class="avatar-small" onclick="selectAvatar(this)" src="images/avatars/1.png">
<img class="avatar-small" onclick="selectAvatar(this)" src="images/avatars/2.png">
<img class="avatar-small" onclick="selectAvatar(this)" src="images/avatars/3.png">

JavaScript:

function selectAvatar(el) {
    var imgSrc = el.src;
    console.log("img Src  = " + imgSrc);
}

Demo: http://jsfiddle.net/IrvinDominin/RpP7h/

edited Mar 28, 2014 at 21:27

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

answered Mar 28, 2014 at 21:26

Irvin Dominin

31k9 gold badges83 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user2009750 · Accepted Answer · 2014-03-28 21:33:45Z

2

In single page many elements with same class might exist making it an array so use it like this

document.getElementsByClassName('avatar-small')[index].src;

For clicking part not sure about Javascript events but JQuery would offer it this way:

$(document).ready(function(){

   $(document).on("click", ".avatar-small", function()
    {
        console.log($(this).attr("src"));
        //for changing it
        $(this).attr("src") =  "resized_image.jpg";

    });

});

edited Mar 28, 2014 at 21:33

answered Mar 28, 2014 at 21:28

user2009750

3,1976 gold badges37 silver badges58 bronze badges

3 Comments

Felix Kling Over a year ago

getElementsByClassName('avatar-small').[index] is a syntax error. And where does index come from?

user2009750 Over a year ago

sorry remove dot before [index]

user2009750 Over a year ago

@Francesca index is indication use a number instead for example you have 3 elements with this class so you can use any number between 0 and 2 inclusive

Trattles · Accepted Answer · 2014-03-28 21:37:26Z

1

When you call a function from onClick() you need to pass 'this' to the function, otherwise the function itself doesn't have 'this' defined and will default to 'this' referencing the Window object.

<img src="xxxx.jpg" onclick="myFunction(this)" />

You also don't need to search by class. If you do that you'll end up getting an array of all of the elements. Just pass 'this' to the function and simplify it this way.

function myFunction(element) {
  var thing = element.src;
}

Now you've got your src and can do with it as you please!

answered Mar 28, 2014 at 21:37

Trattles

6771 gold badge6 silver badges22 bronze badges

3 Comments

Francesca Over a year ago

Perfect! Thanks for the simple answer :) I knew this was the issue which is why I mentioned it in the OP

Felix Kling Over a year ago

That's basically the same answer Irvin posted 10min before you: stackoverflow.com/a/22723489/218196

Irvin Dominin Over a year ago

@Francesca same as my answer and posted 10min after, why not accept mine :-( ?

beautifulcoder · Accepted Answer · 2014-03-28 21:24:54Z

0

document.get Elements ByClassName('avatar-small') returns an array. You have to use an index, like:

document.getElementsByClassName('avatar-small')[0]

answered Mar 28, 2014 at 21:24

beautifulcoder

11.4k3 gold badges21 silver badges31 bronze badges

1 Comment

Felix Kling Over a year ago

This would always get the first element with that class now, not the one that was clicked.

Collectives™ on Stack Overflow

Javascript get .src from specific image onclick

4 Answers 4

Comments

3 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related