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"/></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"; }
0

9 Answers

Give your img tag an id, then you can

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

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

<img src="image1.jpg" alt="image"> <img 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.

2

if you use the JQuery library use this instruction:

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

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

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.

<img src="../template/edit.png" name="edit-save" onclick="this.src = '../template/save.png'" />
1

With the snippet you provided (and without making assumptions about the parents of the element) you could get a reference to the image with

document.querySelector('img[name="edit-save"]');

and change the src with 

document.querySelector('img[name="edit-save"]').src = "..."

so you could achieve the desired effect with 

var img = document.querySelector('img[name="edit-save"]'); img.onclick = function() { this.src = "..." // this is the reference to the image itself };

otherwise, as other suggested, if you're in control of the code, it's better to assign an id to the image a get a reference with getElementById (since it's the fastest method to retrieve an element)

In this case, as you want to change the src of the first value of your element, you have no need to build up a function. You can change this right in the element:

<a href='#' onclick='this.firstChild.src="../template/save.png"')'> <img src="../template/edit.png"/> </a>

You have several ways to do this. You can also create a function to automatize the process:

function changeSrc(p, t) { /* where p: Parent, t: ToSource */ p.firstChild.src = t }

Then you can:

<a href='#' onclick='changeSrc(this, "../template/save.png");'> <img src="../template/edit.png"/> </a>

Maybe because you have a tag like a parent of the tag. That why you have to click two time the images.

For me the solution is this: