Cambie programáticamente el src de una etiqueta img

¿Cómo puedo cambiar el srcatributo de una imgetiqueta usando javascript?

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

al principio tengo un src predeterminado que es "../template/edit.png" y quería cambiarlo con "../template/save.png" al hacer clic.

ACTUALIZADO: aquí está mi html onclick:

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

y mi JS

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

He intentado insertar esto dentro de la edición (), funciona pero necesito hacer clic en la imagen dos veces

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

Dele a su etiqueta img una identificación, luego puede

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

Puede usar el método jquery y javascript: si tiene dos imágenes, por ejemplo:

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

1) Método Jquery->

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

2) Método Javascript->

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

Para este tipo de problema, jquery es el más simple de usar.

si usa la biblioteca JQuery use esta instrucción:

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

ahora está bien

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

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

En este caso, como desea cambiar el srcprimer valor de su elemento, no necesita construir una función. Puede cambiar esto directamente en el elemento:

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

Tienes varias formas de hacer esto. También puede crear una función para automatizar el proceso:

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

Entonces tú puedes:

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

Con el fragmento que proporcionó (y sin hacer suposiciones sobre los padres del elemento) podría obtener una referencia a la imagen con

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

y cambiar el src con

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

para que puedas lograr el efecto deseado con

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

de lo contrario, como otros sugirieron, si tiene el control del código, es mejor asignarle ida la imagen una referencia getElementById(ya que es el método más rápido para recuperar un elemento)

Dale a tu imagen una identificación. Entonces puedes hacer esto en tu javascript.

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

Puede usar el método ".___" para cambiar el valor de cualquier atributo de cualquier elemento.

Tal vez porque tienes una etiqueta como padre de la etiqueta. Por eso tienes que hacer clic dos veces en las imágenes.

Para mí, la solución es esta: http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb