Programmatically change the src of an img tag

Question

How can I change the src attribute of an img tag using javascript?

<img src="../template/edit.png" name=edit-save/>

at first I have a default src which is "../template/edit.png" and I wanted to change it with "../template/save.png" onclick.

UPDATED: here's my html onclick:

<a href='#' onclick='edit()'><img src="../template/edit.png" id="edit-save"/></a>

and my JS

function edit()
{   
    var inputs = document.myform;
    for(var i = 0; i < inputs.length; i++) {
        inputs[i].disabled = false;
    }
}

I've tried inserting this inside the edit(), it works but need to click the image twice

var edit_save = document.getElementById("edit-save");
    edit_save.onclick = function(){
       this.src = "../template/save.png";
    }

Solution 1

its ok now

function edit()
{   
    var inputs = document.myform;
    for(var i = 0; i < inputs.length; i++) {
        inputs[i].disabled = false;
    }

    var edit_save = document.getElementById("edit-save");

       edit_save.src = "../template/save.png";                              
}

Solution 2

Give your img tag an id, then you can

document.getElementById("imageid").src="../template/save.png";

Solution 3

You can use both jquery and javascript method: if you have two images for example:

<img class="image1" src="image1.jpg" alt="image">
<img class="image2" src="image2.jpg" alt="image">

1)Jquery Method->

$(".image2").attr("src","image1.jpg");

2)Javascript Method->

var image = document.getElementsByClassName("image2");
image.src = "image1.jpg"

For this type of issue jquery is the simple one to use.

Solution 4

if you use the JQuery library use this instruction:

$("#imageID").attr('src', 'srcImage.jpg');

Solution 5

Give your image an id. Then you can do this in your javascript.

document.getElementById("blaah").src="blaah";

You can use this syntax to change the value of any attribute of any element.

View more solutions

Comments

[Brian Leishman]

For simple things like setting the value of an input or changing an image src (especial when you're using elements that have IDs), you really should try to avoid jQuery, since the call is so much slower than the pure JS call

[Popnoodles]

The question does not ask for a jQuery answer, include a jQuery tag, or suggest that it's okay to use jQuery.

[Mahdi Jazini]

@william44isme and our page will be loaded slower than before. i think the jQuery is useful just for websites that uses a same code, very more. for example if we use the above code more than 30 or 50 times. so it's necessary to use jQuery

[metaColin]

Telling folks to use jQuery when an equivalent function is built right into Javascript makes no sense. Every JS question does not require a jQuery answer. This solution is a kludge that prevents people from learning about what vanilla JS can already do.

[metaColin]

The poster never indicated any interest in a jQuery solution. Nor is the jQuery method simpler. Do not answer a JS questions with jQuery solutions (unless the post indicates they want that). It just confuses people trying to learn JS.

[Tushar Gaurav]

getElementByClassName returns collection of all elements. We need to mention index of the element too. var image = document.getElementsByClassName("image2")[0]; image.src = "image1.jpg"

[FluorescentGreen5]

Inline JS isn't exactly a great idea.