jquery - Undefined src when using attr() of image

Question

Just learning jQuery. What I want is to grab the src of the image and display it in a fixed division, kind of like a pop up, with the title of the image. But I'm stuck at getting the src of the image.

When I tried using the .attr(), its giving me undefined.

HTML:

            <div id="album">

                <div class="pic">

                </div>

                <div class="screen">
                    <h1 class="title">Photo 1</h1>
                    <img src="images/1 png.png" class="image" />
                    <p class="description">This is a description</p>
                </div>

                <div class="screen">
                    <h1 class="title">Photo 1</h1>
                    <img src="images/1 png.png" class="image" />
                    <p class="description">This is a description</p>
                </div>
                <span class="clear_left"></span>

            </div>

css:

.screen {
    border: 1px solid green;
    margin: 10px auto;
    float: left;
    cursor:pointer
}

.image {
    width: 300px;

}

.title {
    font-size: 30px;
}

.description {
    font-size: 25px;
}

.pic {
    width: 600px;
    position:fixed;
}

js:

$(document).ready(function () {
    $(".pic").hide();
    $(".screen").click(function () {
        display();
    });
});

function display() {
    var source = $("img",this).attr("src");
    alert("The souce of the image is " + source);
}

score 3 · Accepted Answer · answered Oct 23 '13 at 20:22

3

The problem is, the display() method does not have the context of the element being clicked. Hence it is showing undefined

So, try this:

$(document).ready(function () {
    $(".pic").hide();
    $(".screen").click(function () {
        display($(this));
    });
});

function display($this) {
    var source = $("img", $this).attr("src");
    alert("The souce of the image is " + source);
}

Working demo

answered Oct 23 '13 at 20:22

karthikr

97,368
26
197
188

Thanks it worked! How do I pass this src and display it in the div (.pic)? I have added `$('.pic').show();`, but I don't know how to pass the src to display the image and its description in the .pic div. – Robin Oct 23 '13 at 21:12
That is simple: This post should help you:http://stackoverflow.com/questions/8013792/how-to-create-a-new-img-tag-with-jquery-with-the-src-and-id-from-a-javascript-o – karthikr Oct 23 '13 at 21:20

score 1 · Answer 2 · answered Oct 23 '13 at 20:24

1

Dont wrap your function call with another anonymous function:

Demo: http://jsfiddle.net/9KgSQ/

$(".screen").click(display);

This will now pass along this to your function.

answered Oct 23 '13 at 20:24

tymeJV

103,943
14
161
157

score 0 · Answer 3 · answered Oct 23 '13 at 20:23

this in the display function is referring to your anonymous function, not the element. You don't need to wrap it. $('.screen').click(display) will make sure that this references the .screen element.

I would also change display to do this instead:

function display() {
    var source = $(this).find('img').attr('src');
    alert("The source of the image is " + source);
}

This wraps jQuery around the .screen element that was clicked on and finds the img element inside of it. I think it's a little more clear, but this is just a preference thing.

That is the same as `"img", this` – tymeJV Oct 23 '13 at 20:23 — tymeJV, Oct 23 '13 at 20:23

score 0 · Answer 4 · answered Oct 23 '13 at 20:28

It's because the value of this in display is not the same as the value of this in the click function for .screen. You can do a test for that by calling console.log(this); within the display function to see what the value of this is.

If you want to pass the value of this on to display you can use the call function like so:

$(document).ready(function () {
    $(".pic").hide();
    $(".screen").click(function () {
        display.call(this);
    });
});

function display() {
    var source = $("img", this).attr("src");
    alert("The souce of the image is " + source);
}

Or you could completely get rid of the anonymous function and pass in display directly:

$(".screen").click(display);

score 0 · Answer 5 · answered Jul 27 '15 at 19:25

0

It's because your src IS undefined.

function display() {
    var source = $("img",this).attr("src", "images/okay.jpg");
    alert("The souce of the image is " + source);
}

answered Jul 27 '15 at 19:25

slickrick

11
1
3

jquery - Undefined src when using attr() of image

5 Answers5