On changing an image source to the source of another image with jquery.

Question

Should the following code not work?

$('.elastica').click(function(){
    document.getElementById('bigimage').attr('src')= $(this).attr('src');
});

It doesn't change a thing on the site. I've also tried this outputting the image location trough the the other image's id, but it comes up empty (literally ""). When I output the other image's src to a div box with innerHTML for texting, it comes up as undefined.

Either way it won't update bigimage's src.

Answer 1

$('.elastica').click(function(){
    $('#bigimage').attr('src', $(this).attr('src'));
});

Answer 2

document.getElementById('bigimage') isn't a jQuery object so you cant use jquery function attr on it. You can do it like this:

$(document.getElementById('bigimage')).attr('src', $(this).attr('src'));

but you can also use jquery selector engine to get #bigimage:

$('#bigimage').attr('src', $(this).attr('src'));

Answer 3

By calling

document.getElementById('bigimage')

you receive the native DOM object which doesn't know about .attr() which is a jQuery method. You can either call

document.getElementById('bigimage').src = $(this).find('img').attr('src');

or you have to get a jQuery object in order to call the .attr() method like:

jQuery('#bigimage').attr('src', $(this).find('img').attr('src'));