Javascript: Changing src not working

Question

I'm calling a function like this:

<img src="/images/icons/info.png"
width="18" height="18" class="iconbutton" alt="Add to Library" 
onclick="AddLibrary(12345,this.id); this.onclick=null;" />

The function then POSTS 12345 to another script and then is supposed to change the icon image:

function AddLibrary(pibnval,thisid) {
    $.post('/addlibrary.php', {
        pibn: pibnval
    }, function() {
    thisid.setAttribute('src', "/images/icons/tick.png");
    });
};

The POST works great, but the image does not change.

I also tried: document.getElementById(thisid).src = "/images/icons/tick.png"; but that didn't work either.

Any ideas?

where is the id of your img tag that you are passing to the function? — Bhushan Firake
– Bhushan Firake, Commented Feb 20, 2013 at 9:55
@T.J.Crowder agree he really doesn't need one, but then he should rename his variables, and call on this, instead of this.id — jbl
– jbl, Commented Feb 20, 2013 at 10:05

T.J. Crowder · Accepted Answer · 2013-02-20 09:55:42Z

5

thisid is just a string, not an element. Change your onclick to:

onclick="AddLibrary(12345,this); this.onclick=null;"

(I removed the .id) and your thisid variable name to img or some such (just so it's not misleading):

function AddLibrary(pibnval,img) {
    $.post('/addlibrary.php', {
        pibn: pibnval
    }, function() {
    img.setAttribute('src', "/images/icons/tick.png");
    });
};

Other notes:

There's no reason to use setAttribute for this, image elements have a src property.
You don't put ; after function declarations.
Consistent indentation helps you, and others, read your code.

So:

function AddLibrary(pibnval,img) {
    $.post('/addlibrary.php', {
        pibn: pibnval
    }, function() {
        img.src = "/images/icons/tick.png";
    });
}

answered Feb 20, 2013 at 9:55

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

Comments

Hello-World · Accepted Answer · 2013-02-20 10:03:01Z

0

Try this - $('#'+ thisid).attr("src", '/images/icons/tick.png');

Also does your image have to be an image? because you could make it a div with a background image and set its width and height in css then just alter the css background like this

$('#'+ thisid).css({'background':'/images/icons/tick.png'});

edited Feb 20, 2013 at 10:03

answered Feb 20, 2013 at 9:57

Hello-World

9,57524 gold badges91 silver badges157 bronze badges

Comments

Seimen · Accepted Answer · 2013-02-20 10:07:59Z

0

I'd rather attach the handler with JS (instead of inline) but you could change the code to this:

HTML

<img src="/images/icons/info.png"
width="18" height="18" class="iconbutton" alt="Add to Library" 
onclick="AddLibrary(event, 12345);" />

JS

function AddLibrary(e, pibnval) {
    var _this = e.target;

    $.post('/addlibrary.php', {
        pibn: pibnval
    }, function() {
        _this.setAttribute('src', "/images/icons/tick.png");
        _this.onclick = null;
    });
}

answered Feb 20, 2013 at 10:07

Seimen

7,2942 gold badges30 silver badges42 bronze badges

Collectives™ on Stack Overflow

Javascript: Changing src not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related