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' />

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' />

• javascript
• html

4 Answers 4

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/IrvinDominin/RpP7h/

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";

    });

});

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!

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

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